CSS 'display: table-column' не работает должным образом

Question

может ли кто-нибудь объяснить эту проблему, пожалуйста?

В правиле Mozilla Developer Networkdisplay: table-column CSS описывается как: Эти элементы ведут себя, как соответствующие <col> HTML элементов.

Я до сих пор никогда не использовал CSS-таблицы из-за того, что они не поддерживаются в более старых версиях IE, но сегодня я обнаружил, что даже для современных браузеров CSS-таблицы нельзя рассматривать как реальные подстановки для HTML-тегов.

<style> 
    .css_table { 
     display: table; 
     border: 1px solid black; 
     padding: 10px; 
    } 
    .col { 
     display: table-column; 
     width: 20px; 
    } 
    .table_row { 
     display: table-row; 
    } 
    input { 
     width: 100%; 
     display: table-cell; 
    } 

    table { 
     border: 1px solid black; 
     padding: 10px; 
    } 
    col { 
     width: 20px; 
    } 
</style> 

<div class="css_table"> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="col"></div> 
    <div class="table_row"> 
     <input> 
     <input> 
     <input> 
    </div> 
    <div class="table_row"> 
     <input> 
     <input style="width:50px;"> 
     <input> 
    </div> 
    <div class="table_row"> 
     <input> 
     <input> 
     <input> 
    </div> 
</div> 

<table> 
<col> 
<col> 
<col> 
<tr> 
    <td><input></td> 
    <td><input></td> 
    <td><input></td> 
</tr> 
<tr> 
    <td><input></td> 
    <td><input style="width:50px;"></td> 
    <td><input></td> 
</tr> 
<tr> 
    <td><input></td> 
    <td><input></td> 
    <td><input></td> 
</tr> 
</table> 

Адрес Fiddle. Как вы можете видеть, я намерен создать «матрицу» 3x3, и я хочу использовать таблицы, чтобы столбцы автоматически корректировали свою ширину, если некоторые элементы превышают ширину ячейки.

Но в случае подхода CSS table-column свойство не работает должным образом. Несмотря на то, что у меня три ячейки подряд, все ячейки помещаются в первую колонку.

Итак, вопрос в том, что я сделал что-то неправильно или реализация правил CSS неверна? Потому что очевидно, что CSS-столбцы не ведут себя как настоящий HTML-код <col>.

Спасибо.

Answer 1

Вы не можете указать входной элемент в качестве ячейки таблицы.

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

Answer 2

Вы должны иметь аналогичную структуру с html-таблицами.

<row> 
<col> 
<col> 
</row> 

<row> 
<col> 
<col> 
</row> 

http://jsfiddle.net/btevfik/SS3XL/