Question

我的HTML：

<table class="tab">
    <tr><td>aa</td><td>aa</td><td>aa</td></tr>
    <tr><td colspan="3"><div class="in">bbb</div></td></tr>
</table>

<table class="tab">
    <tr><td>aa</td><td>aa</td><td>aa</td></tr>
    <tr><td colspan="3"><div class="in">bbbbb</div></td></tr>
</table>

我的CSS：

.tab td {
    padding: 3px;
    border: 1px solid red;
}

.in {
    background-color: green
}

如何设置绿色背景与此DIV中的文本宽度相同，而不是所有TD？

现场：http://jsfiddle.net/xE4gS/

Answer 1

如果我理解正确，您希望绿色背景的宽度与div中的文字相同？

如果有，请将div更改为span。这是因为div是块级元素，并且意味着一行中只能出现一个元素，因此它将自动填充所有可用的水平空间。 inline元素（例如span）允许将多个元素放在一行上。

或者，您可以将div内联，如this fiddle

Answer 2

把它放在跨度而不是div中？假设这就是你想要的。

<table class="tab">
    <tr><td>aa</td><td>aa</td><td>aa</td></tr>
    <tr><td colspan="3"><div><span class="in">bbb</span></div></td></tr>
</table>

http://jsfiddle.net/infernalbadger/xE4gS/2/

Answer 3

将文字添加到span中，而不是div中

<span class="in">xbbbb</span>


span.in {
 background-color: green;
}

Answer 4

如果您希望背景为绿色，背景为div，则可以将div更改为范围。

来自w3School：标记用于对文档中的内联元素进行分组。标签本身不提供视觉变化。标记提供了一种向文本的一部分或文档的一部分添加钩子的方法。当文本挂钩在span元素中时，您可以向内容添加样式，或使用例如JavaScript操作内容。

http://www.w3schools.com/tags/tag_span.asp

TD中的宽度DIV

4 个答案: