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 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?

123095

小开

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.

小开

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.

小开

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