CSS 'display: table-column' 无法正常工作答案

【问题标题】：CSS 'display: table-column' does not work properlyCSS 'display: table-column' 无法正常工作
【发布时间】：2013-03-08 23:08:24
【问题描述】：

谁能解释一下这样的问题？

Mozilla Developer Networkdisplay: table-column CSS 规则描述为：这些元素的行为类似于对应的<col> HTML 元素。

由于旧版本的 IE 不支持 CSS 表格，直到现在我从未广泛使用过 CSS 表格，但今天我发现即使对于现代浏览器，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。

谢谢。

【问题讨论】：

你应该关闭输入标签
@btevfik，我使用 HTML5 这不是问题
这是一个正在工作的jsfiddle.net/btevfik/SS3XL

标签： html css html-table css-tables

【解决方案1】：

您不能将输入元素指定为表格单元格。

由于显示属性因无效而被忽略，因此您的表格行中没有任何列可以应用其属性的单元格。

【讨论】：

【解决方案2】：

您需要与 html 表格具有相似的结构。

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

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

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

【讨论】：