82

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Village
  • 22,513
  • 46
  • 122
  • 163
  • 1
    Do you have a fiddle with your attempts? Setting fixed widths and the text alignment on the cells should work – helion3 Feb 01 '14 at 08:00
  • 17
    Use `table-layout: fixed;` – Mr. Alien Feb 01 '14 at 08:01
  • 50% width always works on cells, I'm guessing your problem is really with the table not being 100% in width. – slash197 Feb 01 '14 at 08:03
  • 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 Feb 01 '14 at 08:35

3 Answers3

162

You can set table-layout: fixed; on your table. Using this you can override the browser's automatic column resizing. Then column widths will be set based on the widths that you assign to the cells in the first row.

Cam Jackson
  • 11,860
  • 8
  • 45
  • 78
TechGuy
  • 4,298
  • 15
  • 56
  • 87
38

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;
}
Mazhar MIK
  • 1,022
  • 12
  • 14
31

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.

Itay Gal
  • 10,706
  • 6
  • 36
  • 75