Как оправдать ячейки таблицы CSS?

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

------------------------------------------------------------- 
|  First | Middle1 | Middle2 | Last | 
-------------------------------------------------------------

Я ищу, чтобы получить эту конструкцию

------------------------------------------------------------- 
| First  | Middle1 | Middle2 |  Last | 
-------------------------------------------------------------

Первой колонка выровнена налево, средние колонн выравниваются по центру, и последний столбец выравнивается вправо. В настоящее время я использую решение, которое нацелено на: first-child и: last-child, чтобы точно их выровнять. Есть ли лучший/более умный способ?

источник

2016-02-05 Alvarez

Вы хотите использовать Flexbox? –

Пожалуйста, разместите HTML и CSS в своем вопросе. – j08691

html - это всего лишь несколько divs, которые имеет родительский дисплей: таблица и дочерний элемент имеют отображение: table-cell. Я попытался использовать флеш-бокс, но он по-прежнему глючит, а браузеры вычисляют ширину по-разному. – Alvarez

Используйте td align атрибут:

td { 
 
    min-width:100px; 
 
    border:1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td align="left">Left</td> 
 
    <td align="center">Center</td> 
 
    <td align="center">Center</td> 
 
    <td align="right">Right</td> 
 
    </tr> 
 
</table>

источник

2016-02-05 19:57:16 APAD1

heh. До тех пор, пока это таблица, может также пойти в старую школу так, как я предполагаю ... –

Я использую таблицу css, но даже если бы я использовал обычную таблицу, это решение по-прежнему требует нацеливания первого и последнего ребенка, который Я пытаюсь избежать – Alvarez

Просто FYI нет такой вещи, как «таблица CSS». Вы можете использовать CSS для того, чтобы divs действовали как ячейки таблицы, если это то, что вы имеете в виду. Если это так, вы можете изменить свой вопрос, так как это смутит людей. Проводка HTML/CSS, вероятно, также поможет. – APAD1

Использование CSS:

td { 
    text-align: center; 
} 
td:nth-child(1) 
{ 
    text-align: left; 
} 
td:nth-child(4) 
{ 
    text-align: right; 
}

источник

2016-02-05 20:03:45

Align атрибуты теперь устаревшее. Они по-прежнему работают с точки зрения согласования контента, но в целом их не следует использовать. Используйте селекторы псевдоэлементов CSS для таргетинга первой и последней ячейки в каждой строке.

td { 
    text-align: center; 
} 

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

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

источник

2016-02-05 20:10:59 tyau

Как оправдать ячейки таблицы CSS?

ответ

Смежные вопросы