代码之家 › 专栏 › 技术社区 › tadm123

如何以这种方式构造bootrap表?

twitter-bootstrap css

tadm123 · 技术社区 · 6 年前

我试过这样做,但我不知道如何在一行中放置两列(英寸,厘米)

3 回复 | 直到 6 年前

Gurmatpal 6 年前

this code will help you. check the below jsfiddle link

    https://jsfiddle.net/Gurmatpal/aq9Laaew/221894/

Udara Kasun 6 年前

你试过这样做吗?

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    text-align:center;
}

.title{
   background-color:red;
}

.sub-title{
   background-color:lightgreen;
}

.footer{
  background-color:lightcoral;
}

<table>
   <thead>
      <tr class="title">
         <th colspan="7">Size Table</th>
      </tr>
      <tr class="sub-title">
         <th rowspan="2"></th>
         <th colspan="2">Bust</th>
         <th colspan="2">Bust</th>
         <th colspan="2">Bust</th>
      </tr>
      <tr class="sub-title">
         <th>CH</th>
         <th>CM</th>
         <th>CH</th>
         <th>CM</th>
         <th>CH</th>
         <th>CM</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>S</td>
         <td>col1</td>
         <td>col2</td>
         <td>col3</td>
         <td>Col4</td>
         <td>Col5</td>
         <td>Col6</td>
      </tr>
      <tr>
         <td>M</td>
         <td>col1</td>
         <td>col2</td>
         <td>col3</td>
         <td>Col4</td>
         <td>Col5</td>
         <td>Col6</td>
      </tr>
      <tr>
         <td>L</td>
         <td>col1</td>
         <td>col2</td>
         <td>col3</td>
         <td>Col4</td>
         <td>Col5</td>
         <td>Col6</td>
      </tr>
   </tbody>
   <tfoot>
      <tr class="footer">
         <th colspan="7">description</th>
      </tr>
   </tfoot>

</table>

Hariom Singh 6 年前

检查此代码。我想这对你有帮助

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}

<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="2">&nbsp;</th>
            <th colspan="2">&nbsp;</th>
        </tr>
        <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

Bryan Santos · 固定表头与引导

3 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

7 年前

Alexander David · 折叠卡打开,然后立即再次关闭

7 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

7 年前