Как сделать так, чтобы моя HTML-таблица была на 100% шириной и чтобы все ее ячейки были такими же широкими, как их содержимое?

Question

У меня есть эта сетка:

Если я изменю ширину таблиц с 100% на автоматическую, таблица свернется по горизонтали.

Что не желательно.Как сделать так, чтобы столбцы таблицы (элементы td) автоматически сокращались, чтобы соответствовать их содержимому, в то же время элементы таблицы и tr заполняют все пространство своего родителя?

Answer 1

Как сделать так, чтобы столбцы таблицы (элементы td) автоматически сокращались в соответствии с их содержимым, в то время как элементы table и tr заполняют все пространство своего родителя?

Элементы

<table> и <tr> имеют такую ​​же ширину, как элементы <td> внутри них.Нельзя, чтобы каждое значение <td> было таким же маленьким, как его содержимое , а , если вся таблица была бы такой же широкой, как доступное пространство, потому что таблица может быть такой же ширины, как ячейки внутри нее.

(то есть, в отличие от большинства элементов HTML, элементы <table> не могут быть измерены независимо от их содержимого.)

Вы можете установить одну ячейку максимально широкой, предоставивэто ширина 100%:

<table style="width: 100%; background: grey; color: white;">
     <tr>
         <td style="background: red;">Content</td>
         <td style="background: green;">Content</td>
         <td style="background: blue; width: 100%;">Content</td>
     </tr>
</table>

См. http://jsfiddle.net/9bp9g/

Answer 2

Ширина <td> будет определяться шириной <td> в первом <tr>.

В противном случае вы можете использовать CSS для определения правил для <td> ширины, например:

.myform tr td{padding:0px;margin:0px;}
.myform td{width:200px;}