带有 colspan 的 Bootstrap 嵌套内表答案

【问题标题】：Bootstrap nested inner table with colspan带有 colspan 的 Bootstrap 嵌套内表
【发布时间】：2012-07-27 03:17:46
【问题描述】：

对于这个 Bootstrap 样式表，我希望三列（Sub1、Sub2、Sub3）的宽度增加并与嵌套表中的相应列对齐。

http://jsfiddle.net/jamesholcomb/r55Zc/

【问题讨论】：

您的标记不正确fiddle
更新：这是一个简化的例子。是的，我知道我可以使用行跨度来简化和补救，但如果可以，我希望看到使用内部表的解决方案。
不，你不能这么简单......

标签： html css twitter-bootstrap

【解决方案1】：

不要使用嵌套的<table>，只需在第一列上使用rowspan 属性即可。可以使用一些创意 CSS (example) 移除边框（和一些填充）：

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

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

【讨论】：

这会导致行突出显示不起作用，因为我认为他希望它起作用。
我意识到我可以摆脱内表并更轻松地使用行跨度。然而，这是一个简化的例子。实际的实现是使用 knockout.js 进行绑定。它基本上是一个巨大的枢轴，包含沿两个维度的内部表，这些内部表相互独立地进行排序、增长和收缩。

【解决方案2】：

如果您希望整行正确突出显示，我建议您按照其他人的建议调整您的表格。但是，与其创建多个 tr 并给 td 的行跨度为 3（这会导致行突出显示问题），不如将 td 中的数据列为无序列表并对 css 进行一些调整。

表：

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

td > ul {
  list-style-type:none;
  margin:0;        
}

这是更新后的fiddle@Mr.Alien 的建议。

【讨论】：