Css 将单元格内的div与其内容相适应

我需要创建如下表：

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

我需要的具体内容是，文本必须由一个彩色矩形包装，该矩形必须适合内容。 到目前为止，我唯一做的事情是下表：

但是我需要一个彩色的矩形来适应里面的文字。 有什么帮助吗

谢谢

您可以编辑这些项目，以便使用

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

ul{
浮动：左；
保证金：0；
填充：0；
列表样式：无；
}
ul>li{
浮动：左；/*收缩以适应宽度*/
清除：左；/*每行一个*/
保证金：5px；
填充物：5px；
边界半径：5px；
盒影：0 2px 5px#666；
背景：#B642CA；
}
ul：第一种类型>li{
背景：#16A32F；
}

A列长
A列
A列长


B栏
B列长
B栏

如果我正确理解了您试图实现的目标，您只需声明

显示：内联块

s，请确保不给它们任何明确的宽度：

表格，tr，td{
边框：1px实心rgb（227）；
}
运输署{
最小宽度：90px；
}
运输署分区{
显示：内联块；
颜色：rgb（255255）；
填充：4px；
边界半径：8px；
}
tr td:nth类型（1）div{
背景色：rgb（22163,47）；
}
tr td:nth类型（4）div{
背景色：rgb（182,66202）；
}

A列长
B栏
A列
B列长
A列长
B栏

你必须更清楚你的意思。。。