CSS“display:table column”无法正常工作

有人能解释这样的问题吗?

在 Mozilla Developer Network display: 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> s

谢谢