引导数据表 - 具有相同宽度的不同行数的单元格答案

【问题标题】：Bootstrap Data Table - Different number of cells of rows with the same width引导数据表 - 具有相同宽度的不同行数的单元格
【发布时间】：2017-07-17 05:46:15
【问题描述】：

我有一个引导 (3.3.7) 数据表，我想在所有 td 上放置相同的宽度。最终，我想让所有具有 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 class="container">      
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th colspan="8">SPECIFICATION</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="td-parent" colspan="2">Part Number</td>
        <td class="td-parent" colspan="2">Position</td>
        <td class="td-parent" colspan="2">Content</td>
      </tr>
      <tr>
        <td class="td-child" colspan="2">CDR1005</td>
        <td class="td-child" colspan="2">Front/Rear</td>
        <td class="td-child" colspan="2">4 identical pads</td>
      </tr>
      <tr>
        <td class="td-parent col-4" colspan="2">Meritor</td>
        <td class="td-parent col-4" colspan="2">Mercedes</td>
        <td class="td-parent col-4" colspan="2">Renault</td>
        <td class="td-parent col-4" colspan="2">WVA</td>
      </tr>
      <tr>
        <td class="td-child" colspan="2">TBA</td>
        <td class="td-child" colspan="2">TBA</td>
        <td class="td-child" colspan="2">TBA</td>
        <td class="td-child" colspan="2">TBA</td>
      </tr>
      <tr>
        <td class="td-parent" colspan="2">A</td>
        <td class="td-parent" colspan="2">B</td>
        <td class="td-parent" colspan="2">C</td>
      </tr>
      <tr>
        <td class="td-child" colspan="2">250</td>
        <td class="td-child" colspan="2">118</td>
        <td class="td-child" colspan="2">28</td>
      </tr>
    </tbody>
  </table>
</div>

【问题讨论】：

标签： html css twitter-bootstrap datatable

【解决方案1】：

1) 使用`colspan` 使单元格占据整行

对于一行中的 3 列，使用 colspan = 4
对于一行中的 4 列，使用 colspan = 3

2) 使用`table-layout: fixed` 获得相等的宽度。

table-layout 属性定义了用于布置表格的算法。如果未设置，大多数浏览器将默认其值为auto，其中宽度取决于内容。因此，单元格的宽度不相等。 但是，当您将此属性设置为 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 class="container">      
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th colspan="12">SPECIFICATION</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="td-parent" colspan="4">Part Number</td>
        <td class="td-parent" colspan="4">Position</td>
        <td class="td-parent" colspan="4">Content</td>
      </tr>
      <tr>
        <td class="td-child" colspan="4">CDR1005</td>
        <td class="td-child" colspan="4">Front/Rear</td>
        <td class="td-child" colspan="4">4 identical pads</td>
      </tr>
      <tr>
        <td class="td-parent" colspan="3">Meritor</td>
        <td class="td-parent" colspan="3">Mercedes</td>
        <td class="td-parent" colspan="3">Renault</td>
        <td class="td-parent" colspan="3">WVA</td>
      </tr>
      <tr>
        <td class="td-child" colspan="3">TBA</td>
        <td class="td-child" colspan="3">TBA</td>
        <td class="td-child" colspan="3">TBA</td>
        <td class="td-child" colspan="3">TBA</td>
      </tr>
      <tr>
        <td class="td-parent" colspan="4">A</td>
        <td class="td-parent" colspan="4">B</td>
        <td class="td-parent" colspan="4">C</td>
      </tr>
      <tr>
        <td class="td-child" colspan="4">250</td>
        <td class="td-child" colspan="4">118</td>
        <td class="td-child" colspan="4">28</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

我也能够让 3 列的行也到达表格的右侧，问题在于 3 列的行具有相同的宽度。
我的错！应该是其他方式。我更新了我的答案。（这是应用于您的某些单元格的类具有误导性。）
3 列的行在宽度上仍然看起来不均匀，4 列的行对我来说也没有
使用table-layout: fixed，将根据表格的第一行确定列宽。（即您的第一行跨越 12 列，因此列宽由该行的宽度除以 12 来确定。）但是，如果您没有在表格或表格单元格上定义 width 属性，浏览器可能会忽略此规则，因为没有设置表格的宽度。（事实是，在这种特殊情况下，您不需要 width: 1% "magic"，因为您使用的是引导程序，它已经设置了表格的宽度。）
哦，不错不错。感谢提供信息的人真的很有帮助。

【解决方案2】：

带有colspan的控制列

.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 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>




<div class="container">      
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th colspan="12">SPECIFICATION</th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            <td width="33.3333%" class="td-parent" colspan="4">Part Number</td>
            <td width="33.3333%" class="td-parent" colspan="4">Position</td>
            <td width="33.3333%" class="td-parent" colspan="4">Content</td>
        </tr>
        <tr>
            <td class="td-child" colspan="4">CDR1005</td>
            <td class="td-child" colspan="4">Front/Rear</td>
            <td class="td-child" colspan="4">4 identical pads</td>
        </tr>
        <tr>
            <td class="td-parent" colspan="3">Meritor</td>
            <td class="td-parent" colspan="3">Mercedes</td>
            <td class="td-parent" colspan="3">Renault</td>
            <td class="td-parent" colspan="3">WVA</td>
        </tr>
        <tr>
            <td class="td-child" colspan="3">TBA</td>
            <td class="td-child" colspan="3">TBA</td>
            <td class="td-child" colspan="3">TBA</td>
            <td class="td-child" colspan="3">TBA</td>
        </tr>
        <tr>
            <td class="td-parent" colspan="4">A</td>
            <td class="td-parent" colspan="4">B</td>
            <td class="td-parent" colspan="4">C</td>
        </tr>
        <tr>
            <td class="td-child" colspan="4">250</td>
            <td class="td-child" colspan="4">118</td>
            <td class="td-child" colspan="4">28</td>
        </tr>
    </tbody>
</table>
</div>

【讨论】：

我已经知道我可以用 colspan 控制它。如果您仔细查看包含 3 列的行，则列中的宽度是不一样的。
我认为您可以在 tr 中添加单独的表格以使 4col 宽度相同...
虽然单独的表可以工作，但没有必要。使用table-layout: fixed 让浏览器根据其宽度属性而不是其内容来计算单元格宽度。
查看我对工作代码的回答，并查看MDN 或W3C 以获得解释。
@ChavaG 太棒了.. ！

【解决方案3】：

使用这个：

对于 th clspan = 12
对于一行中的 3 列，使用 colspan = 4 (3 * 4 = 12)
对于一行中的 4 列，使用 colspan = 3 (4 * 3 = 12)

使用这个 CSS：

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<table class="table table-bordered table-striped">
	<thead>
		<tr>
			<th colspan="12">SPECIFICATION</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="td-parent" colspan="4">Part Number</td>
			<td class="td-parent" colspan="4">Position</td>
			<td class="td-parent" colspan="4">Content</td>
		</tr>
		<tr>
			<td class="td-child" colspan="4">CDR1005</td>
			<td class="td-child" colspan="4">Front/Rear</td>
			<td class="td-child" colspan="4">4 identical pads</td>
		</tr>
		<tr>
			<td class="td-parent" colspan="3">Meritor</td>
			<td class="td-parent" colspan="3">Mercedes</td>
			<td class="td-parent" colspan="3">Renault</td>
			<td class="td-parent" colspan="3">WVA</td>
		</tr>
		<tr>
			<td class="td-child" colspan="3">TBA</td>
			<td class="td-child" colspan="3">TBA</td>
			<td class="td-child" colspan="3">TBA</td>
			<td class="td-child" colspan="3">TBA</td>
		</tr>
		<tr>
			<td class="td-parent" colspan="4">A</td>
			<td class="td-parent" colspan="4">B</td>
			<td class="td-parent" colspan="4">C</td>
		</tr>
		<tr>
			<td class="td-child" colspan="4">250</td>
			<td class="td-child" colspan="4">118</td>
			<td class="td-child" colspan="4">28</td>
		</tr>
	</tbody>
</table>
</div>

【讨论】：

同样的注释也适用于您的代码 - 我也能够让 3 列的行也到达表格的右侧，问题在于 3 列的行具有相同的宽度。
您的问题已经解决。请检查流动的代码。
不，3 列的行在宽度上仍然看起来不均匀，4 列的行也一样。问题还没有解决。

【解决方案4】：

我的个人意见，使不同行的宽度相同，分开表格是唯一的方法。

我希望这行得通。

table { table-layout: fixed; }
.col-1 { width: 100%; }
.col-2 { width: 50%; }
.col-3 { width: 33.3%; }
.col-4 { width: 25%; }
.col-5 { width: 20%; }
.col-6 { width: 16.66666667%; }

.table-head
{
  border: 1px solid black;
  margin-bottom: 0 !important;
  padding-bottom: 0;
  text-align: center;
}

.table-body 
{
     border: 1px solid black;
     border-top: 0;
     margin-top: 0;
     padding-top: 0;
     margin-bottom: 0;
     padding-bottom: 0;
}



tr, th, td {
  text-align: center !important;
}

.td-parent {
  font-weight: bold;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">      
  <table class="table table-bordered table-striped table-head">
      <tr>
        <th class="col-1" colspan="3">SPECIFICATION</th>
      </tr>
  </table>
  <table class="table table-bordered table-striped table-head">
      <tr>
        <td class="td-parent col-3" >Part Number</td>
        <td class="td-parent col-3" >Position</td>
        <td class="td-parent col-3" >Content</td>
      </tr>
      <tr>
        <td class="td-child col-3" >CDR1005</td>
        <td class="td-child col-3" >Front/Rear</td>
        <td class="td-child col-3" >4 identical pads</td>
      </tr>
   </table>
  <table class="table table-bordered table-striped table-head">
      <tr>
        <td class="td-parent col-4" >Meritor</td>
        <td class="td-parent col-4" >Mercedes</td>
        <td class="td-parent col-4" >Renault</td>
        <td class="td-parent col-4" >WVA</td>
      </tr>
      <tr>
        <td class="td-child col-4" >TBA</td>
        <td class="td-child col-4">TBA</td>
        <td class="td-child col-4" >TBA</td>
        <td class="td-child col-4">TBA</td>
      </tr>
  </table>
  <table class="table table-bordered table-striped table-head">
      <tr>
        <td class="td-parent" >A</td>
        <td class="td-parent" >B</td>
        <td class="td-parent" >C</td>
      </tr>
      <tr>
        <td class="td-child" >250</td>
        <td class="td-child" >118</td>
        <td class="td-child" >28</td>
      </tr>
  </table>
</div>

【讨论】：

制作单独的表格是可行的，但在我看来，这不是唯一的方式（或首选方式）......
你是对的。我知道的另一种方法是定义 colgroup 并通过 colspan 计算每行中 col 的宽度...
是的。我认为这也需要table-layout: fixed，以便浏览器根据定义的宽度而不是基于内容来确定列宽。

1) 使用colspan 使单元格占据整行

2) 使用table-layout: fixed 获得相等的宽度。

1) 使用`colspan` 使单元格占据整行

2) 使用`table-layout: fixed` 获得相等的宽度。