How to make a table with equal column widths in CSS?
css, html, html-table
Solution
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.
Problem
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?