width DIV in TD

width DIV in TD

本文关键字：TD in DIV width      更新时间：2023-09-26

我的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/

如果我理解正确的话，您希望绿色背景与div ?

中的文本宽度相同。

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

或者，您可以使div内联，如下图所示

用span代替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/

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

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

span.in {
 background-color: green;
}

如果你想让背景颜色为绿色，与div内的文本宽度相同，你可以将div更改为span。

从w3School

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

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

相关文章：