引导数据表——具有相同宽度的行的不同数量的单元格

I have a bootstrap (3.3.7) data table that I want to put the same width on all tds. Eventually, I would like to get all the rows with 3 cells to reach to the right side of the table keeping the same width in each cell. I did tons of research to find something like this but failed so any help with this would much appreciated.

我有一个引导(3.3.7)数据表，我想在所有tds上设置相同的宽度。最后，我希望将所有包含3个单元格的行都放到表的右侧，使每个单元格的宽度保持相同。我做了大量的研究来找到这样的东西，但是失败了，所以任何帮助都将非常感谢。

The following screenshot is what I currently have:

以下是我目前的截图:

And the following is what I would like to change my table to:

下面是我想将我的表格改为:

.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>

4 个解决方案

#1

1) Use colspan so cells take up entire row

• For 3 columns on a row use colspan = 4
• 对于一行上的3列，使用colspan = 4
• For 4 columns on a row use colspan = 3
• 对于一行上的4列，使用colspan = 3

2) Use table-layout: fixed to get equal widths.

The table-layout property defines the algorithm used to lay out tables. If it is not set, most browsers will default its value to auto, where width depends on content. Therefore you are not getting equal widths for the cells. When you set this property to fixed, however, column width is determined by width, not by content.

表布局属性定义了用于列出表的算法。如果没有设置，大多数浏览器将默认其值为auto，其宽度取决于内容。因此细胞的宽度不相等。但是，当您将该属性设置为固定时，列宽是由宽度决定的，而不是由内容决定的。

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>

#2

control columns with colspan

控制列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>

#3

My personal opinions, to make the same width of different rows making separate tables is the only way.

我个人的观点是，要使不同的行宽度相同，单独的表是唯一的方法。

I hope this works.

我希望这工作。

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>

#4

Use this:

用这个:

• For th clspan = 12
• 对于clspan = 12
• For 3 columns on a row use colspan = 4 (3 * 4 = 12)
• 对于一行中的3列，使用colspan = 4 (3 * 4 = 12)
• For 4 columns on a row use colspan = 3 (4 * 3 = 12)
• 对于一行上的4列，使用colspan = 3 (4 * 3 = 12)

---

Use this CSS:

使用这个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>