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

Question

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?

Answer 1

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.