HTMLテーブル、望ましくないcolspan

Question

ここではちょっとばかだと感じる。私は第1の<td>をテーブルの70-80％に広げ、第2と第3のテーブルの間に残りのスペースを分割します。

は私が<th>colspanから6を設定し、最初の<td> 4のcolspanを与えることが、私はこれを実現するために設定することができるようになると思ったが、テーブルの半分を取るように見える、そして最後の2 <td>です異なる幅。どのようにこれを解決するための任意のアイデア？

HTML

<table class="table table-record no-margin-bottom">     
    <thead> 
    <tr> 
     <th colspan="6" class="table-tab-active--grey font-weight-bold text-md-center">Tasks</th> 
    </tr>          
    </thead> 
    <tbody> 
    <tr class="bg--lighter-grey txt--darker-blue" "> 
     <td colspan="4">Lorem Ipsum</td> 
     <td colspan="1" class="text-uppercase font-weight-bold">Lorem</td> 
     <td colspan="1" class="font-weight-bold text-uppercase no-padding"><button class="btn btn--orange btn-block">Lorem Ipsum</button></td> 
    </tr> 
    <tr class="bg--lighter-grey txt--darker-blue" "> 
     <td colspan="4">Lorem Ipsum</td> 
     <td colspan="1" class="text-uppercase font-weight-bold">Lorem</td> 
     <td colspan="1" class="font-weight-bold text-uppercase no-padding"><button class="btn btn--lighter-grey btn-block">Button</button></td> 
    </tr>       
    </tbody> 
</table> 

Answer 1

テーブルの上％の幅を設定し、指定された幅を有するように、それぞれのTDを設定します。

.table td:nth-child(0) {width: 70% } 
.table td:nth-child(1) { width:15% } 

<td>タグに％widthを明示的に設定することができます。

Answer 2

これは、列スパンではありません。
列の幅を広げるために、列幅を使用することはできません。彼らはセルが複数の列を取るべきであることをテーブルに伝えることを意図しています。

テーブルに6つのカラムがある場合、4のカラムスパンを使用すると、セルに4つのカラムが使用されます。各列が同じ幅の場合、そのセルは他のセルの4倍の幅になります。

table {border:1px outset #777; table-layout:fixed} 
 
td {border:1px inset #777; width:16.66%}

<table> 
 
<tr> 
 
    <td>one</td><td>two</td><td>three</td><td>four</td><td>five</td><td>six</td> 
 
</tr> 
 
<tr> 
 
    <td colspan="4">one to four</td><td>five</td><td>six</td> 
 
</tr> 
 
</table> 
 

しかし、それが動作するためには、列はすでに幅を持っている必要があります。
したがって、幅の設定から逃げることはありません。とにかくそれをやらなければならない場合、あなたの場合、colspanも使う必要はありません。幅のみ。

table {border:1px outset #777; table-layout:fixed} 
 
td {border:1px inset #777; width:16.66%} 
 
td:first-child {width:66.66%}

<table> 
 
<tr> 
 
    <td>one</td><td>two</td><td>three</td> 
 
</tr> 
 
</table>

あなたはしかしtable-layout性質を研究する必要があるかもしれません。設定するとセルの幅が保持されます。それがなければ、テーブルはすべてを表示するために指定された幅を無視することがあります。