将细胞内的div与其内容相匹配

Question

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

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

我需要的具体事情是文本必须用一个必须符合内容的彩色矩形包裹。 我到目前为止唯一做的就是下表：

但是我需要彩色矩形来适应文本。 对此有何帮助？

由于

Answer 1

您可float项目，以便使用shrink-to-fit algorithm计算其宽度。

然后，为了防止项目水平堆叠并每行强制一个，您可以使用clearance。

＆＃13;

＆＃13;

GetAsyncKeyState()

＆＃13;

ul {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul > li {
  float: left; /* Shrink-to-fit width */
  clear: left; /* One per line */
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 0 2px 5px #666;
  background: #B642CA;
}
ul:first-of-type > li {
  background: #16A32F;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我正确理解您要实现的目标，您只需要为display: inline-block;声明<div>，并确保不要给它们任何明确的宽度：

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;