3

誰かがそのような問題を説明できますか？

Mozilla Developer Network では、display: table-columnCSSルールは次のように記述されています。これらの要素は、対応する<col>HTML要素のように動作します。

古いバージョンのIEではサポートされていないため、これまで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>

これがフィドルです。ご覧のとおり、私の意図は「マトリックス」3x3を作成することであり、一部の要素がセルの幅を超えた場合に列が自動的に幅を調整するようにテーブルを使用したいと思います。

ただし、CSSアプローチの場合、table-columnプロパティは期待どおりに機能しません。3つのセルが連続しているにもかかわらず、すべてのセルが最初の列に配置されます。

だから問題は、私が何か間違ったことをしたのか、それとも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 に答える