Html 带 colspan 的 Bootstrap 嵌套内表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11675452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap nested inner table with colspan
提问by James
For this Bootstrap styled table, I want the three columns (Sub1, Sub2, Sub3) widths to grow and align with their corresponding columns in the nested table.
对于这个 Bootstrap 样式的表格，我希望三列（Sub1、Sub2、Sub3）的宽度增长并与嵌套表格中的相应列对齐。
回答by 0b10011
Instead of using a nested <table>, simply use the rowspanattribute on the first column. Borders (and some padding) can be removed with some creative CSS (example):
而不是使用嵌套的<table>，只需使用rowspan第一列上的属性。边框（和一些内边距）可以通过一些有创意的 CSS 移除（示例）：
CSS
CSS
th { text-align: center; }
tbody td {
border-width: 0 !important;
padding-top:0 !important;
}
tbody tr th ~ td {
border-top-width: 1px !important;
padding-top:8px !important;
}
tbody tr td:first-of-type {
border-left-width: 1px !important;
}
HTML
HTML
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
<tr>
<th></th>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Row1</th>
<td>[-01234543333545]</td>
<td>[4567]</td>
<td>[1]</td>
</tr>
<tr>
<td>[1]</td>
<td>[456.789]</td>
<td>[2]</td>
</tr>
<tr>
<td>[0]</td>
<td>[1]</td>
<td>[0000789.0123]</td>
</tr>
</tbody>
</table>
</div>
</div>
回答by boggsey
If you want the entire row to highlight correctly, I suggest you tweak your table as others have suggested. However, instead of creating multiple trs and giving the td a rowspan of 3 (which causes row highlighting problems), just list the data in the td as an unordered list and make some adjustments to the css.
如果您希望整行正确突出显示，我建议您按照其他人的建议调整您的表格。但是，不是创建多个 trs 并为 td 提供 3 的行跨度（这会导致行突出显示问题），只需将 td 中的数据列为无序列表并对 css 进行一些调整。
Table:
桌子：
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Sub1</td>
<td>Sub2</td>
<td>Sub3</td>
</tr>
<tr>
<td>Row1</td>
<td><ul><li>[-01234543333545]</li><li>[1]</li><li>[0]</li></ul></td>
<td><ul><li>[4567]</li><li>[456.789]</li><li>[1]</li></ul></td>
<td><ul><li>[1]</li><li>[2]</li><li>[0000789.0123]</li></ul></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
CSS：
td > ul {
list-style-type:none;
margin:0;
}
Here is the updated fiddleforked from @Mr.Alien's suggestions.
这是从@Mr.Alien 的建议分叉的更新小提琴。
