html - 创建一个具有自动宽度 <td> 的表格

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>