Как создать таблицу с одинаковыми ширинами столбцов в CSS?

У меня есть документ, содержащий такую таблицу:

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

Используя CSS, мне нужно установить все ячейки на 50% ширину, при этом текст в левой колонке выравнивается по правому краю, а текст в левом столбце выравнивается по левому краю. Я пробовал много разных вариантов, например. width: 50%; text-align: left, но результаты всегда необычны. Результаты должны выглядеть следующим образом:

 _________________________
|       word | definition |
|____________|____________|
|       word | definition |
|____________|____________|

Я не могу напрямую настроить фактический код таблицы. Я могу изменить только стиль CSS.
Ответ в Сделать столбцы равной ширины в <table> не подходит, потому что я не знаю ширины страницы, и эта ширина может меняться.

Как я могу установить ячейки с равной шириной в таблице с двумя столбцами в CSS со всеми, выровненными по середине?

Ответ 1

Вы можете установить table-layout: fixed; на свою таблицу. Используя это, вы можете переопределить изменение размера столбца браузера. Затем ваш браузер устанавливает ширину столбца первого столбца ко всем.

Ответ 2

В таблице должно быть свойство width: 100%. См. пример здесь

table{
    width: 100%;
    border-collapse:collapse;
}

td{
    width: 50%;
    text-align: left;
    border: 1px solid black;
}

О выравнивании текста вы сказали две разные вещи:

Используя CSS, мне нужно установить все ячейки на 50% ширины, с текстом в левый "столбец" выравнивается по правому краю и текст в левом столбце выравнивание по левому краю.

а затем

Как я могу установить ячейки с равной шириной в таблице с двумя столбцами в CSS со всеми, выровненными по середине?

Если первое - это то, что вы хотите, и вы не можете изменить свой HTML, вы можете использовать td:first-child, чтобы по-разному стилизовать свой первый столбец.

Если второй вариант - ваш лучший вариант, просто измените значение text-align на center.