无法让表格单元格均匀展开

Question

我试图让我的表格均匀地展开每个单元格，但在压缩时不重叠。我的css是

table.basic {
  border-collapse: collapse;
  border: 0px solid black;
  width: 100%;
}

我的html是

<table class="basic" style="white-space: nowrap">
  <tr>
    <th>Hex</th>
    <th>RGB</th>
    <th>HSL</th>
  </tr>
  <tr>
    <td id="colorhexDIV"></td>
    <td id="colorrgbDIV"></td>
    <td id="colorhslDIV"></td>
  </tr>
</table>

现在他们没有重叠，但他们没有居中

如果我添加table-layout: fixed;，那么它们会居中但重叠

我也试图避免像这样包装

如何使其居中并防止细胞重叠？

Answer 1

您必须从 HTML 中删除white-space: nowrap，然后才能使用width: 33%

table.basic {
  border-collapse: collapse;
  border: 0px solid black;
  width: 100%;
}

th,td {
  width: 33.3%;
  border: 1px solid black;
  text-align: center;
}

<table class="basic">
  <tr>
    <th>Hex</th>
    <th>RGB</th>
    <th>HSL</th>
  </tr>
  <tr>
    <td id="colorhexDIV">Text</td>
    <td id="colorrgbDIV">Text</td>
    <td id="colorhslDIV">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ex alias nihil minus labore perspiciatis maiores porro quas eius provident expedita, dolore obcaecati officiis consectetur quidem, animi aperiam exercitationem est.</td>
  </tr>
</table>

Answer 2

要使单元格的内容居中，请使用text-align样式。 风格=＆＃34;文本对齐：中心;＆＃34; 表datatll的内容将根据其中的内容进行扩展，尝试使用div或span并将其设置为固定大小，以便所有内容的长度相同。

Answer 3

您可以使用table-layout: fixed停止表格，并根据内容调整子项大小，并将宽度设置为表格元素之一