CODEWITHSUNDEEP
htmlcsshtml-tablemultiple-columns
Simon Ferndriger
Simon Ferndriger

Reputation: 4962

How to create two equal columns with a fix space in between

I have a table with width:100% and it should have 3 columns as follows:

[50%-space/2][space][50%-space/2]

Now, I have this already

<table style="width:100%"><tr>
   <td>left</td>
   <td style="width:20px"></td> //space
   <td>right</td>
</table>

This works fine, as long as there is always a "left" and "right" width the same width, but it stops working if one has a different width:

<table style="width:100%"><tr>
   <td></td>
   <td style="width:20px"></td> //space
   <td>right</td> // right takes all the space from the first td
</table>

And if I set "left" and "right" each to 50%, the space in between is omitted:

<table style="width:100%"><tr>
   <td style="width:50%"></td>
   <td style="width:20px"></td> //space
   <td style="width:50%">right</td> // right takes all the space from the first td
</table>

Unfortunately, the space cannot be in % in this case (which would solve the problem easily). Also using CSS columns is not (yet) an option.

Is there a solution for this?

JSFiddle

Upvotes: 0

Views: 946

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Example: http://jsfiddle.net/9yVx9/1/

use table-layout: fixed property

table {
    table-layout:fixed;
}

Screenshot enter image description here

Upvotes: 2

Related Questions