2

これは私には意味がありませんが、繰り返しになりますが、私は CSS の専門家にはほど遠いです (おそらく、優れた初心者でさえありません)。

relative/を使用してabsoluteいるのは、巨大なテーブルから動的にページ分割されたテーブルを使用しているためです。これは、ユーザーがクライアントに負荷をかけずにデータをすばやく確認できるようにするためです。

ご覧のとおり、table-rowは 100% 拡張しますが、table-cellは従いませんtable-layout:fixed。table-cell使用可能なすべてのスペースを埋めるには、 を展開する必要がありtable-rowます。

（ちなみに、border-collapse: collapseどちらも機能しません。）

助けてください。よろしくお願いします！

HTML

<div class="gridTable">
    <div class="gridRow">
        <div class="gridCell">a</div>
        <div class="gridCell">JKL;</div>    
        <div class="gridCell">Jb</div>  
    </div>
</div>

CSS

.gridTable{
display:table;
table-layout:fixed;
position:relative;
border-collapse: collapse;
}
.gridHeaderRow{
top:0px;
}
.gridRow, .gridHeaderRow{
display:table-row;
position:absolute;
}
.gridCell{
display:table-cell;
}
.gridTable, .gridRow, .gridHeaderRow{
width:100%;
}
.gridTable, .gridTable *{
border-collapse:collapse;
}
.gridTable div{
border-color:black;
border-width:1px;
border-style:solid;
}
4

1 に答える 1

1

行ルールから絶対位置を削除しましたが、うまくいきました（chrome、firefox）

.gridRow, .gridHeaderRow{
  display:table-row;
}

固定ヘッダーが必要な場合は、次のようにヘッダーを分離できます。

<div class="gridTableBox">
    <div class="gridTable gridHeaderTable">
        <div class="gridRow">
            <div class="gridCell">T1</div>
            <div class="gridCell">T2</div>
            <div class="gridCell">T3</div>
        </div>
    </div>
    <div class="gridTable gridBody">
        <div class="gridRow">
            <div class="gridCell">a</div>
            <div class="gridCell">JKL;</div>
            <div class="gridCell">Jb</div>
        </div>
    </div>
</div>

これで、テーブルレイアウトを壊すことなく、gridHeaderTabledivに絶対位置を与えることができます。

更新されたフィドルはここにあります。

于 2013-01-30T19:59:07.750 に答える