html – Bootstrap数据表 – 具有相同宽度的不同行数的单元格

概述我有一个bootstrap(3.3.7)数据表,我想在所有tds上放置相同的宽度.最后,我希望所有带有3个单元格的行到达表格的右侧,每个单元格保持相同的宽度.我做了大量的研究来找到这样的东西,但失败了,所以任何帮助都会非常感激. 以下截图是我目前拥有的： 以下是我想将表格更改为： .col-2 { width: 50%; }.col-3 { width: 33.3%; }.col-4 { wi 我有一个bootstrap(3.3.7)数据表,我想在所有tds上放置相同的宽度.最后,我希望所有带有3个单元格的行到达表格的右侧,每个单元格保持相同的宽度.我做了大量的研究来找到这样的东西,但失败了,所以任何帮助都会非常感激.

以下截图是我目前拥有的：

以下是我想将表格更改为：

.col-2 { wIDth: 50%; }.col-3 { wIDth: 33.3%; }.col-4 { wIDth: 25%; }.col-5 { wIDth: 20%; }.col-6 { wIDth: 16.66666667%; }table {  margin-top: 50px;}thead tr th,td {  text-align: center;}.td-parent {  Font-weight: bold;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS"><div >        <table >    <thead>      <tr>        <th colspan="8">SPECIFICATION</th>      </tr>    </thead>    <tbody>      <tr>        <td  colspan="2">Part Number</td>        <td  colspan="2">position</td>        <td  colspan="2">Content</td>      </tr>      <tr>        <td  colspan="2">CDR1005</td>        <td  colspan="2">Front/Rear</td>        <td  colspan="2">4 IDentical pads</td>      </tr>      <tr>        <td  colspan="2">Meritor</td>        <td  colspan="2">Mercedes</td>        <td  colspan="2">Renault</td>        <td  colspan="2">WVA</td>      </tr>      <tr>        <td  colspan="2">TBA</td>        <td  colspan="2">TBA</td>        <td  colspan="2">TBA</td>        <td  colspan="2">TBA</td>      </tr>      <tr>        <td  colspan="2">A</td>        <td  colspan="2">B</td>        <td  colspan="2">C</td>      </tr>      <tr>        <td  colspan="2">250</td>        <td  colspan="2">118</td>        <td  colspan="2">28</td>      </tr>    </tbody>  </table></div>

解决方法 1)使用colspan使细胞占据整行

>对于一行中的3列,请使用colspan = 4
>对于一行中的4列,请使用colspan = 3

2)使用table-layout：fixed来获得相等的宽度.

table-layout属性定义用于布置表的算法.如果未设置,大多数浏览器会将其值默认为auto,其中wIDth取决于内容.因此,您没有为单元格获得相等的宽度.但是,将此属性设置为fixed时,列宽由宽度决定,而不是由内容决定.

table {  margin-top: 50px;  table-layout: fixed;}thead tr th,td {  text-align: center;  wIDth: 1%;}.td-parent {  Font-weight: bold;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS"><div >        <table >    <thead>      <tr>        <th colspan="12">SPECIFICATION</th>      </tr>    </thead>    <tbody>      <tr>        <td  colspan="4">Part Number</td>        <td  colspan="4">position</td>        <td  colspan="4">Content</td>      </tr>      <tr>        <td  colspan="4">CDR1005</td>        <td  colspan="4">Front/Rear</td>        <td  colspan="4">4 IDentical pads</td>      </tr>      <tr>        <td  colspan="3">Meritor</td>        <td  colspan="3">Mercedes</td>        <td  colspan="3">Renault</td>        <td  colspan="3">WVA</td>      </tr>      <tr>        <td  colspan="3">TBA</td>        <td  colspan="3">TBA</td>        <td  colspan="3">TBA</td>        <td  colspan="3">TBA</td>      </tr>      <tr>        <td  colspan="4">A</td>        <td  colspan="4">B</td>        <td  colspan="4">C</td>      </tr>      <tr>        <td  colspan="4">250</td>        <td  colspan="4">118</td>        <td  colspan="4">28</td>      </tr>    </tbody>  </table></div>

总结

以上是内存溢出为你收集整理的html – Bootstrap数据表 – 具有相同宽度的不同行数的单元格全部内容，希望文章能够帮你解决html – Bootstrap数据表 – 具有相同宽度的不同行数的单元格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。