CSS 'display: table-column' does not work properly

Question

does anyone can explain such a problem, please?

At the Mozilla Developer Network display: table-column CSS rule is described as: These elements behave like the corresponding <col> HTML elements.

I never widely used CSS tables until now due to the fact that they are not supported in older versions of IE, but today I found that even for modern browsers CSS tables can not be considered as real substitutions for HTML ones.

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

Here is a Fiddle. As you can see, my intention is to create a "matrix" 3x3 and I want to use tables so that columns will automatically adjust their width if some elements exceed width of a cell.

But in the case of CSS approach table-column property does not work as expected. Despite the fact that I have three cells in a row, all cells are placed in the first column.

So the question is: whether I did something wrong or CSS rule implementation is buggy? Cause it is obvious that CSS "columns" do not behave like real HTML <col>s.

Thanks.

Answer 1

You cannot specify an input element as a table cell.

Since the display property is being ignored due to invalidity, your table rows do not have any cells in them to which the columns can apply their properties.

Answer 2

You need to have the similar structure with html tables.

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

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

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