3

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

在Mozilla 开发者网络 display: table-columnCSS 规则被描述为：这些元素的行为类似于相应的<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>

这是一个小提琴。如您所见，我的意图是创建一个 3x3 的“矩阵”，并且我想使用表格，以便在某些元素超过单元格宽度时，列将自动调整其宽度。

但是在 CSS 方法的情况下，table-column属性不能按预期工作。尽管我连续有三个单元格，但所有单元格都放在第一列。

所以问题是：是我做错了什么还是 CSS 规则实现有问题？因为很明显，CSS“列”的行为不像真正的 HTML <col>。

谢谢。

4

2 回答 2

2

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

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

于 2013-03-20T01:44:57.700 回答
1

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

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

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

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

于 2013-03-20T01:44:26.147 回答