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

Question

我有一个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 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>

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

Answer 2

使用此：

• 对于clspan = 12
• 对于一行中的3列，请使用colspan = 4（3 * 4 = 12）
• 对于一行中的4列，请使用colspan = 3（4 * 3 = 12）

使用此CSS：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

Answer 4

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

我希望这有效。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;