CODEWITHSUNDEEP
htmlcss
user765368
user765368

Reputation: 20346

group contents inside td element

let's say I have something like this:

<table>
    <tr>
        <td>
           <span class="text_1">Text 1</span>
           <span class="text_2">Text 2</span>
        </td>
    </tr>
</table>

How can I tell each span inside my td to take 50% of the width of my td and also center align the text of my span? I also want the texts to appear next to each other on the same line inside my td. I tried something like on the spans:

...
<span class="text_1" style="display:inline-block;width:50%;">Text 1</span>
<span class="text_2" style="display:inline-block;width:50%;">Text 2</span>
...

But that didn't work

Thank you

Upvotes: 0

Views: 146

Answers (1)

David Thomas
David Thomas

Reputation: 253358

They will each take 50% of the width of the parent element, the problem is the newline between the elements that also takes up a portion of that space. 50% + a space + 50% equals more than 100%.

Remove the new-line, or use float: left (or right).

With float: left: JS Fiddle demo.

Without the new-line: JS Fiddle demo.

Upvotes: 1

Related Questions