CODEWITHSUNDEEP
htmlcss
Thomas
Thomas

Reputation: 79

td width is bigger than it should be

http://jsfiddle.net/kpz8hxuy/

<table style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; width: 50%;">
<h2>Loremipsum</h2>
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos.</p>
<p>&nbsp;</p>
<p><a href="#">Loremipsum</a></p>
</td>
<td style="width: 20px;">&nbsp;</td>
<td style="width: 1px; background: #ddd;">&nbsp;</td>
<td style="width: 20px;">&nbsp;</td>
<td style="text-align: center;">
<h3>Loremipsum</h3>
<p>&nbsp;</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos.</p>
<p>&nbsp;</p>
<p><a href="#">Loremipsum</a></p>
</td>
</tr>
</tbody>
</table>

I set the td width to 1px but its not 1px, its 6px.

Cant really figure out why it behaves like this.

best regards

Upvotes: 0

Views: 2077

Answers (2)

alexmngn
alexmngn

Reputation: 9637

You should use border-left: 1px solid #ddd on your td instead of this 1px column. You shouldn't use a column of your table for layout purpose.

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85643

By default the table-layout is auto. Even when you've defined the width of the table td it will expand depending on its contents. So, using fixed layout for the table wouldn't automatically expand the contents rather it would be set within the defined width.

table{
  table-layout: fixed;
}

And when you are trying to use td width in just 1px, I suppose you're trying to use a border, so, use border instead of defining the td width.

table td{
   border-left: 1px solid #000;
}

Upvotes: 5

Related Questions