How to make a table with equal column widths in CSS?

71
votes

I have a document containing a table like this:

<table>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
    <tr>
        <td>
            Word
        </td>
        <td>
            Definition
        </td>
    </tr>
</table>

Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned. I've tried many different options, e.g. width: 50%; text-align: left, but the results are always unusual. The results should look like this:

 _________________________
|       word | definition |
|____________|____________|
|       word | definition |
|____________|____________|
  • I cannot adjust the table's actual code directly. I can only modify the CSS style.
  • The answer in Make columns of equal width in <table> is not suitable, because I do not know the width of the page, and that width might vary.

How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?

3
htmlcsshtml-table
Do you have a fiddle with your attempts? Setting fixed widths and the text alignment on the cells should work – helion3
Use table-layout: fixed; – Mr. Alien
50% width always works on cells, I'm guessing your problem is really with the table not being 100% in width. – slash197
Oh, I see. I had put padding on the outsides and between the cells. Also, some text that has really long words was pushing some tables to not be 50%/50%. – Village

3 Answers

131
votes

You can set table-layout: fixed; on your table. Using this you can override the browser's automatic column resizing. Then your browser sets the column width of first column to all.

24
votes

The table should have width: 100% property. See example here

table{
    width: 100%;
    border-collapse:collapse;
}

td{
    width: 50%;
    text-align: left;
    border: 1px solid black;
}

About the text alignment you said two different things:

Using CSS, I need to set all of the cells to 50% width, with text in the left "column" being right-aligned and text in the left column being left-aligned.

and then

How can I set equal-width cells in a two-column table in CSS with everything aligned to the middle?

If the first is what you want and you cannot change your HTML you can use td:first-child to style your first column differently.

If the second is your best option, just change the text-align value to center.

21
votes

I had the same issue in one of my projects, however it got fixed when I combined both the solutions above (Thanks to them). Here is my code snippet :

.Table{
    width: 100%;
    table-layout: fixed;
}