Question

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

在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>不同。< / p>

感谢。

Answer 1

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

由于无效性而忽略了display属性，因此表行中没有任何单元格，列可以应用它们的属性。

Answer 2

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

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

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

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

CSS'display：table-column'无法正常工作

2 个答案: