私はちょっと困っています。なぜならCSSコードが働いていたからですが、それは全く美しくありませんでした。私は今このCSSスタイルを修正して、LESS経由でビルドしたいと思っています。そして、私はdisplay:table;/display:table-row;とdisplay:table-cell;と大きな問題があります。例えばテーブルセル - ある種のcolspan？
私は、次のコードを持っている：http://jsfiddle.net/La3kd/2/
最後のセル（中央）が右に上述した第2のセルをシフトしていない私はそれを行うことができますどのようにということを？最後のセルは、上の2つのセルの幅を持つ必要があります。何らかの種類のcolspanが必要です。それは私がコードを修正する前にそれが働いた印象があるので、とても奇妙です。しかし、今や右のすべての要素は完全にシフトされています。
CSSには、colspanアナログがありません。あなたの例に基づいて、あなたは最後の行を別のnontablyブロックとしてマークアップすることができます。
caption-side: bottomと組み合わせてdisplay: table-captionを使用して、すべての列にまたがる最後の「行」として表の行を表示することもできます。 live demoを参照してください。
CSSを悪用していませんか？ –
あなたはもっと具体的になりますか？ –
はい。誰もがテーブル以外のデータのテーブルをどのように使用するかについて、テーブル乱用について話します。さて、私は、表のキャプションではないのに 'display：table-caption'を使うのがCSS乱用だと言った記録を述べたいと思います。 –
絶対的なポジショニングを活用することが1つ考えられます。テーブルの周囲にラッパーを相対位置に配置すると、すべての絶対位置がラッパーの中心になります。下記参照。注意：私はtableWrapperのクラスを定義してposition：relativeを定義し、tableRowのクラスを定義します。 - あなたが.tableRow div {display：table-cell;}を設定すると仮定しています。 }私は各divにクラスを入れても構いませんでした。高さが2番目のdivよりも大きくなると、divの下にdivが重ならないようにする方法を見つけなければなりません。非常にやらなければならない。
<div class="tableWrapper">
<div class="tableRow">
<div>Column 1</div>
<div>Column 2</div>
</div>
<div class="tableRow">
<div style="border: 1px solid black; position: absolute; width: 100%;">appears like colspan=2</div>
<div> (only here to force a row break before the next table row)</div>
</div>
<div class="tableRow">
<div>Column 1</div>
<div>Column 2</div>
</div>
</div>
あなたは幅にかかわらず、列のヘッダーとフッター行が必要な場合は、テーブルのキャプションは良いアイデアです... 絶対位置は、あなたのテキストが行送り少なくとも一回以上の他の細胞よりもあるときを除いて素晴らしい作品その行に...
ここでは、レスポンシブテーブルの行間にヘッダーを入れ、テーブルヘッダーの内容に応じて改行を付ける擬似的な解決策があります（これは、テーブルが動的に移入される場合に重要です） 。
CSS：
.table
{ display:table;
position:relative;
}
.table > .header
{ display:table-caption;
position:absolute;
left:0;
right:0;
}
.table > .l50{right:50%;}
.table > .r50{left:50%;}
.table > .row{display:table-row;}
.table > .row > *{display:table-cell;}
/* We add an extra cell where neededed to allow or header repositioning using % instead of fixed units */
.table > .header + .row > :last-child
{ width:1%;
max-width:1px;
overflow:hidden;
visibility:hidden;
}
.table > .header + .row > :last-child > div
{ float:left;
display:inline;
visibility:hidden;
width:10000%;/* 100% = parent element width (1%) ⇒ 100*100% = gran-parent element width*/
}
.table > .header + .row > :last-child > div > .l50
.table > .header + .row > :last-child > div > .r50{width:5000%;}
/* No responsive line-feed thought it's possible using % to estimate the size the span should take but it's not accurate (see HTML render) */
.table > .row > div > .span{position:absolute;left:0;right:33%;}
/* THIS MAKES SURE TRADITIONAL CELLS ARE VISIBLE */
.table > .row > .top
{ position:relative;
z-index:1;
}
私はjQueryとtable-layout: fixedを使用して解決策を見つけた私はまた、同様COLSPANのソート（LINE-給されていないが、正確に）用意しました。ここに私のバイオリンです：http://jsfiddle.net/emilianolch/5nvxv5ko/
HTML：
<div class="table">
<div class="table-row">
<div class="table-cell">
top left cell
</div>
<div class="table-cell">
top right cell
</div>
</div>
<div class="table-row">
<div class="table-cell colspan">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="table-row">
<div class="table-cell">
bottom left cell
</div>
<div class="table-cell">
bottom right cell
</div>
</div>
</div>
CSS：
.table {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
border-collapse: collapse;
}
.table-cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
.table-cell.colspan {
display: none;
/* collapse border */
margin-top: -1px;
margin-bottom: -1px;
}
JS：あなたが得るためにそうすることを余儀なくされている場合
var rowWidth = $('.table-row:first').width();
var colWidth = $('.table-cell:first').width();
var marginRight = colWidth - rowWidth + 11;
$('.table-cell.colspan').css('margin-right', marginRight + 'px').show()
あなたの答えにフィドルからコードを追加してください。 – Ram
は実際のテーブルを使用しますあなたが望むレイアウト。
レイアウト用にテーブルを使用しないことが必要なのは、ブラインド用の発言ブラウザが各テーブルセルの行番号と列番号の座標を与えることだけです。これは、テーブルセルをレイアウトに使用すると、ブラインドリーダーを混乱させます。
もちろん、マージン、ボーダー、パディングは、テーブルで偽造するよりもはるかに優れていますが、新聞の欲しい広告ページに似たレイアウトのものがあれば、はるかに簡単です。実際のテーブル、ネストしたテーブルのセット、またはdivでいっぱいのテーブルを使用する方が良いです。
私はいつもdivやdivを使ってテーブルを表示します。
動作しない場合や、別の画面解像度でdivレイアウトが分割された場合は、実際の表を使用します。決して崩れない
W3Cのこのクラージーは、実際のテーブルをテーブルとして扱わないようにするため、CSSを使ったコードを使ってより良い解決策を示していました。
また、ページタイトルの周囲に配置されたコメントの表を、数値ではなく表形式のデータとして扱います。表形式のデータには、カテゴリ形式のデータを含めることができます。
1つのアイデアは、レイアウト作業を行う能力がないためにテーブルの使用が強制されたため、盲目の人に話しているブラウザが提供するテーブル座標を無視するようにする免責事項を隠すことですdivで
あなたのニーズに応じて、フレックスボックスのレイアウトはあなたが探しているものを達成するかもしれません。
div.table{
display:block;
width:100%;
}
div.table >div{
display:flex;
width:100%;
border:1px solid gray;
flex-direction:horizonal;
}
div.table > div >div{
display: block;
flex-grow:1;
border-bottom:1px solid #ddd;
vertical-align: middle;
height:30px;
padding:4px;
}
参照のデモ：
の可能性のある重複した[DIVテーブルCOLSPAN：どのように？]（http://stackoverflow.com/questions/4746061/div-table-colspan-how） – naXa