css - 使单元格内的 div 适合其内容

Question

我需要创建一个这样的表:

| --------------------------------------------------|
| | Column A long |     |     | Column B |          |
| | Column A |          |     | Column B long |     |
| | Column A long |     |     | Column B |          |
| --------------------------------------------------|

我需要的具体内容是文本必须由适合内容的彩色矩形包裹。 到目前为止，我唯一做的就是下表:

但我需要彩色矩形来适应其中的文本。 有什么帮助吗？

谢谢

Answer 1

如果我理解正确你想要达到的目标，你只需要声明 display: inline-block;对于 <div> s 并确保不要给它们任何明确的宽度:

table, tr, td {
border: 1px solid rgb(227,227,227);
}

td {
min-width: 90px;
}

td div {
display: inline-block;
color: rgb(255,255,255);
padding: 4px;
border-radius: 8px;

}

tr td:nth-of-type(1) div {
background-color: rgb(22,163,47);
}

tr td:nth-of-type(4) div {
background-color: rgb(182,66,202);
}

<table>

<tr>
<td><div>Column A long</div></td>
<td></td>
<td></td>
<td><div>Column B</div></tr>
</tr>

<tr>
<td><div>Column A</div></td>
<td></td>
<td></td>
<td><div>Column B long</div></td>
</tr>

<tr>
<td><div>Column A long</div></td>
<td></td>
<td></td>
<td><div>Column B</div></td>
</tr>

</table>