76

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,438
  • 68
  • 55
  • 126
Village
  • 20,305
  • 41
  • 116
  • 158
  • 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
  • 14
    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

145

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.

JP Silvashy
  • 44,746
  • 48
  • 146
  • 219
TechGuy
  • 3,939
  • 13
  • 50
  • 78
  • 11
    > sets the column width of first column to all ––– This is NOT true! I don't understand why this answer has so many upvotes. Table and column widths are set by the widths of table and col elements or by the width of the **first row** of cells. Cells in subsequent rows do not affect column widths.[link](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) – Henry Brewer Jun 02 '19 at 09:57
  • 1
    MDN link: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout – Flimm Jan 13 '21 at 14:18
  • @HenryBrewer Why don't you just edit TechGuy's answer? :) – broiniac Apr 22 '21 at 17:52
28

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,365
  • 6
  • 33
  • 73
27

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
  • 792
  • 9
  • 12