Reputation: 50732

Issue with HTML <table> widths

I have a <table> with 3 columns as:

table {
  border: 1px dashed goldenrod;
}
td {
  border: 1px solid gray;
}

<table>
  <tr>
    <td width="120">Some content</td>
    <td width="150">Some content</td>
    <td width="100%">Some content</td>
  </tr>
</table>

Now the 3rd column ise set to occupy the remaining width..But in my case, while it does stretch and occupy remaining width, it squeezes the first 2 columns...

If I do not give any width to the 3rd column/td, I am able to see the specified width for the first 2 columns..

Please help me.

The table has already been set with width="100%"

Upvotes: 1

Answers (4)

MD Sayem Ahmed

Reputation: 29166

When you are specifying the width of the third td as 100%, it implies that its width should be the same as its parent, which is the corresponding tr in this case. That's why the first and the second tds are being squeezed as the third td is trying to occupy the entire row-width.

If there is absolutely no content in the first two tds, then you won't be able to even see them. Since there are some content in those tds, browser is allocating as minimum space as possible to those two, and the rest of the width is hogged by the third div.

See a demo on jsfiddle about what happens when the width of the last td is 50%. You will see that it occupies exactly half of the row-width.

To remedy this situation, specify a percentage width for the first two tds, then leave the third one's width blank. Here is a demo which shows this approach.

Upvotes: 1