セルが左揃えで、余分なスペースが右にあるテーブル

Question

テーブルのセルを整列させたままで、同時に自動フィットしたいと思います。

例：第二のテーブルに

thead td { 
 
    background-color: yellow; 
 
} 
 
td { 
 
    border:1px solid #000; 
 
}

<br/> 
 
<p> 
 
First table 
 
</p> 
 
<br/> 
 

 
<table style="width: 100%;"> 
 
<thead> 
 
    <tr> 
 
    <td>Title 1</td> 
 
    <td>Title 2</td> 
 
    <td>Title 3</td> 
 
    </tr> 
 
</thead> 
 
<tr> 
 
    <td class="block">First column with some additional text (blah blah blah blah blah)</td> 
 
    <td class="block">Second column</td> 
 
    <td class="block">Third column</td> 
 
</tr> 
 
</table> 
 

 
<br/> 
 
<p> 
 
Second table 
 
</p> 
 
<br/> 
 

 

 
<table style="width: 100%;"> 
 
<thead> 
 
    <tr> 
 
    <td>Title 1</td> 
 
    <td>Title 2</td> 
 
    <td>Title 3</td> 
 
    </tr> 
 
</thead> 
 
<tr> 
 
    <td class="block">First column</td> 
 
    <td class="block">Second column</td> 
 
    <td class="block">Third column</td> 
 
</tr> 
 
</table>

我々は明らかに、各セルが同じ幅であることがわかります。

これは私が望むものではありません。

各セルを余分なスペースを置かずに並べておきたい。 余分なスペースは右側にある必要があります。

編集：私は何をしたいの画像：

Answer 1

編集：あなたは、カラム内のマルチラインは幅

thead td { 
 
    background-color: yellow; 
 
} 
 
td { 
 
    border:1px solid #000; 
 
} 
 
thead td:nth-last-child(1){ 
 
    width:100%; 
 
}

<table style="width: 100%;"> 
 
<thead> 
 
    <tr> 
 
    <td>Title 1</td> 
 
    <td>Title 2</td> 
 
    <td>Title 3</td> 
 
    </tr> 
 
</thead> 
 
<tr> 
 
    <td class="block">First column </td> 
 
    <td class="block">Second column</td> 
 
    <td class="block">Third column</td> 
 
</tr> 
 
</table>

Answer 2

あなたがそのようなことを意味していますか？

<table style="width: 100%;"> 
<thead> 
    <tr> 
    <td style="width: 150px;">Title 1</td> 
    <td style="width: 150px;">Title 2</td> 
    <td>Title 3</td> 
    </tr> 
</thead> 
<tr> 
    <td class="block">First column</td> 
    <td class="block">Second column</td> 
    <td class="block">Third column</td> 
</tr> 
</table> 

Answer 3

でそれを100％にするために、あなたのCSSに

white-space:nowrap; in `td` css 

使用:nth-last-childを使用したくない場合

試してみてください。

thead td { 
 
    background-color: yellow; 
 

 
} 
 
td { 
 
    border:1px solid #000; 
 
} 
 
thead td:last-child{ 
 
    width:100%; 
 
}

<br/> 
 
<p> 
 
First table 
 
</p> 
 
<br/> 
 

 
<table style="width: 100%;"> 
 
<thead> 
 
    <tr> 
 
    <td>Title 1</td> 
 
    <td>Title 2</td> 
 
    <td>Title 3</td> 
 
    </tr> 
 
</thead> 
 
<tr> 
 
    <td class="block">First column with some additional text (blah blah blah blah blah)</td> 
 
    <td class="block">Second column</td> 
 
    <td class="block">Third column</td> 
 
</tr> 
 
</table> 
 

 
<br/> 
 
<p> 
 
Second table 
 
</p> 
 
<br/> 
 

 

 
<table style="width: 100%;"> 
 
<thead> 
 
    <tr> 
 
    <td>Title 1</td> 
 
    <td>Title 2</td> 
 
    <td>Title 3</td> 
 
    </tr> 
 
</thead> 
 
<tr> 
 
    <td class="block">First column</td> 
 
    <td class="block">Second column</td> 
 
    <td class="block">Third column</td> 
 
</tr> 
 
</table>

は、私はいくつかのCSS

thead td:last-child{ 
    width:100%; 
}