1

そこで、、、、を利用したCSSレイアウトを作成していdisplay:tableます。しかし、私は問題に遭遇しました：display:table-rowdisplay:table-cell

DIVの1つにcolspanを適用する必要があります。

ただし、この属性をDIVに追加することは、かなり純粋な悪です。私のオプションは何ですか？

参照： http： //jsfiddle.net/RhFz6

編集：

私は解決策を見つけました：http：//jsfiddle.net/RhFz6/4

すべてをテーブルにする代わりに、中央の領域をテーブルにしました。ヘッダーとフッターはブロック要素として残されました。そこから、テーブルに100％の高さと負のマージンを与えて、ページに収まるようにしました。綺麗になりました！

4

4 に答える 4

3

<table>タグがまだそこにあり、完全に使用できるのに、なぜ人々がテーブルを偽造しようとして自分たちの生活を地獄にしたいと思うのか理解できません。テーブルを使用すると、必要なすべてを適用できrowspanますcolspan。追加table-layout: fixedすると、セルの幅と高さを確実に指定でき、私が見る限り、欠点は残りません。

テーブルには、cellIndexand rowIndex、grouping tHead、togetherなどの便利な機能もtFootあります。tBodies[]テーブルが公開するプロパティを使用することで、はるかに簡単になることがたくさんあります。

于 2012-06-25T01:45:42.183 に答える
0

あなたは絶対にテーブルを偽造する必要がありますか？JSFiddleからは、＃sidebarと#contentを並べて取得しようとしているように見えます。これは、フロートを使用するとかなり簡単に実行できます。#sidebarと#contentdivに背景を持たせ、それらの高さを同じにしたい場合は、代わりに#sidebarに配置する背景を#mainに配置してみてください。#sidebarが背景の要素ではない場合でも、同じように見えます。

概念実証：http： //jsfiddle.net/RhFz6/3/

于 2012-06-25T01:22:10.110 に答える
0

これがあなたが参照していた「邪悪な」オプションであるかどうかはわかりませんが、現在ChromeとOperaでのみサポートされているように見えますが、 column-spanプロパティがあります。

編集：

フィドルの例を見ると、colspanが最初と最後の行（テーブルのヘッダーとフッター）にのみ必要な場合は、いくつかのオプションが必要です。これらの行を偽造しても、内側の行の一貫した列サイズが乱れることはありません。

于 2012-06-25T00:48:35.497 に答える
0

私はそれを理解しました、そして私の解決策は実際にはラッパーも必要としません、それは本当に素晴らしいです。ここを参照してください：

http://jsfiddle.net/RhFz6/4

私の状況を困難にしたのは、ヘッダーとフッターに加えて、本体領域に3つの列が必要だったという事実でした。さらに、レイアウトは流動的な幅であったため、疑似列だけを使用することはできませんでした。もちろん、私もテーブルを使いたくありませんでした。なぜなら、まあ、私は罪悪感を感じるからです。：P

レイアウト全体をテーブルのように扱うのではなく、列スパンが必要な理由で、中央の領域をテーブルにしただけです。ヘッダーとフッターは単にブロック要素として表示されていました。次に、との高さを100％に設定しhtml、body中央のコンテンツ領域の高さを100％にしました。残念ながら、これは最小サイズのレイアウトをウィンドウ領域を超えて押し出しました。これは、100％の高さにヘッダーとフッターを加えたものであったためです。

これを回避するために、疑似テーブルにいくつかの負のマージンを追加し、セルにいくつかの正のパディングを追加し（ヘッダーとフッターがテーブルと重なった後でもコンテンツを表示できるようにします）、いくつかの派手なz-index作業（ヘッダーがテーブルの上ではなく下にあったため）

そして、まあ、タダ！最新のすべてのブラウザで動作しますが、古いブラウザではテストされていません。ご協力いただきありがとうございます！

于 2012-06-25T02:34:50.357 に答える