Question

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

My CSS:

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

.in {
    background-color: green
}

How can I set that green background to have the same width as text in this DIV, not for all TD?

LIVE: http://jsfiddle.net/xE4gS/

Answer 1

If I’ve understood correctly, you want the green background to be the same width as the text in the div?

If so, change the div to a span. This is because div is a block-level element, and means that only one element can appear on one line, so it will automatically fill all horizontal space available. An inline element, such as a span allows for multiple elements to be placed on one line.

Alternatively, you can make the div inline, as in this fiddle