自動幅のテーブルを作成する​​

Question

私は自分自身を説明しようとします。 私はこれを達成したいと思います：

私は4列と多くのtd（行）でテーブルを作成する必要があります。 しかし、私は、その内容に基づいて自動的に列の幅を持たせるために、単一の線が必要です。代わり

：

通常、これは、列と何が起こるか、最大TD（行）が含まれているカラムのサイズを決定します。私はこれを達成しようとしています：

私は元のためのコンテンツを整理することができますように、テーブル（列）の要素を整理したいと思います。アルファベットの性質によって。 しかし、私はこのように見えるの列を必要とする：

任意のアイデア？

Answer 1

カラム（<td>）にはdisplay:inlineを設定できます。より良い選択肢は、<div>とflexboxを使用することです。

td { 
 
    border:2px solid red; 
 
    display: inline; 
 
} 
 
td:nth-child(1) { 
 
    background:yellow; 
 
} 
 
td:nth-child(2) { 
 
    background:blue; 
 
} 
 
td:nth-child(3) { 
 
    background:grey; 
 
} 
 
td:nth-child(4) { 
 
    background:orange; 
 
} 
 
table { 
 
    border:1px dashed black; 
 
}

<table> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    <td>D</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ant</td> 
 
    <td>Bear</td> 
 
    <td>Cat</td> 
 
    <td>Dog</td> 
 
    </tr> 
 
</table>