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

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 https://stackoverflow.com/questions/20375288/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?

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.

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.

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;
}