Bootstrap嵌套内表与colspan

Question

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

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

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

Answer 2

如果您希望整行正确突出显示，我建议您按照其他人的建议调整您的表格。但是，不是创建多个trs并给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;        
}

以下是来自@ Mr.Alien建议的更新fiddle。