html - colspan を使用したブートストラップのネストされた内部テーブル

Question

この Bootstrap スタイルのテーブルでは、3 つの列 (Sub1、Sub2、Sub3) の幅を拡大し、ネストされたテーブルの対応する列に合わせます。

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

Answer 1

ネストされた を使用する代わりに<table>、単純rowspanに最初の列の属性を使用します。ボーダー (および一部のパディング) は、いくつかのクリエイティブな 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

<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

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.

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:

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

Here is the updated fiddle forked from @Mr.Alien's suggestions.