创建一个具有自动宽度的表

Question

我将尝试解释自己。 我想实现这个目标：

我需要创建一个包含4列和许多td（行）的表。 但是，我需要单行根据其内容具有自动列宽。

通常，这是列发生的情况，最大的td（行）决定了包含的列的大小：

相反。我正在努力实现这个目标：

我还想组织表格（列）中的元素，以便我可以为ex组织内容。按字母属性。 但我需要列看起来像这样：

任何想法？

Answer 1

您可以为列（display:inline）设置<td>。更好的选择是使用<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>