HTML-таблица с центрированными ячейками

Question

По сути, я хочу таблицу с одной строкой, 5 ячеек ... Первая / левая ячейка должна быть оставлена ​​только что, последняя / правая ячейка должна быть выровнена по правому краю, а средние 3 ячейки должны быть центрированы с помощьюравное количество промежутков между каждой ячейкой.Сама таблица имеет «ширину 100%, так что отсюда берется расстояние между ячейками.

Как бы я написал это (используя html / css)? Теги« table »или« divs »и т. Д. Обадействительно, я не против того, какой подход используется, если конечный результат выглядит правильно.

Редактировать: Проблема заключается в интервале, сама таблица не является проблемой,но простая установка выравнивания в ячейках не будет работать правильно: свободное пространство между ячейками не делится на 100% поровну между ячейками.

Я также не хочу указывать ширину ячейки, поскольку содержимое является динамическими нет никакой возможности узнать заранее, сколько нужно ширины.

Answer 1

HTML только версия

<table>
<tr>
   <td width="20%"></td>
   <td width="20%" align="center"></td>
   <td width="20%" align="center"></td>
   <td width="20%" align="center"></td>
   <td width="20%" align="right"></td>
</tr>
</table>

CSS-версия

<table>
<tr>
   <td style="width:20%;"></td>
   <td style="width:20%; text-align:center"></td>
   <td style="width:20%; text-align:center"></td>
   <td style="width:20%; text-align:center"></td>
   <td style="width:20%; text-align:right"></td>
</tr>
</table>

Answer 2

td
{
    text-align:center;

}
td:first-child
{
    text-align:left;   
}

td:last-child
{
    text-align:right;
}

Answer 3

Если вы используете таблицу, присвойте уникальные идентификаторы каждой ячейке, а затем используйте css для выравнивания, как требуется, например,

HTML:

<td id="firstcell">...</td>
<td id="secondcell">...</td>
<td id="thirdcell">...</td>
<td id="fourthcell">...</td>
<td id="fifthcell">...</td>

CSS:

table {table-layout:fixed;}  /* ensure the widths are absolutely fixed at the specified width*/
td{ width: 20%;}  /* allocate space evenly between all 5 cells */
td#firstcell {text-align:left;}
td#secondcell, td#thirdcell, td#fourthcell {text-align:center;}
td#fifthcell {text-align:right;}

Answer 4

<style type="text/css">
.five_columns {
    width: 100%;
}
.five_columns > div {
    width: 20%;
    float: left;
    text-align: center;
    overflow: auto;
}
.five_columns > div:first-child {
    text-align: left;
}
.five_columns > div:last-child {
    text-align: right;
}
</style>
<div class="five_columns">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

overflow: auto установлено, потому что, если вы строго хотите, чтобы ширина была одинаковой, на самом деле вы ничего не можете сделать (насколько я знаю), кроме принудительной прокрутки на чем-либоэто слишком долго.