CSSテーブル：テーブル全体の幅

Question

にCOLSPAN行は、私はdisplay: table-*ルールとネストされたブロックのセットを持っています。彼らは流体テーブルを構成する（私は特定のwidthサイズを設定する必要があります）。

行を追加するにはどうすればいいですかcolspansテーブル全体の幅は？ （注：行が他の行との間である、ではない上部にも下部）

私は全体の幅と（PXで）差を算出JS、に依存する、解決策を見つけました行の幅（内容に依存します）を入力し、margin-rightとして使用します。 （、あなたが不一致を参照してくださいあなたはconsole.log中のものに比べて、ウェブ・インスペクタのサイズをチェックしている場合）

は

this exampleを参照してください。しかし、それは正しくサイズを計算しません。

行をテーブル幅全体にコピピアすることはできますか？ 他のソリューション/技術は何ですか？ （これは、ブラウザウィンドウがサイズ変更されるたびに再計算する必要があるという欠点があるためです）。

Answer 1

これを行う実際の方法はないので、現在のレイアウトからどのくらい離れていて快適になるかによって異なります。

このバージョンでは、各「行」は表として見られます。したがって、それぞれの行に挿入するセルの数は関係ありません。

.table-row { 
 
    display: table; 
 
    width: 50%; 
 
    table-layout: fixed; 
 
    background: #ccc; 
 
} 
 
.title { 
 
    font-weight: bold; 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    padding: 3px; 
 
} 
 
.colspan { 
 
    background-color: limegreen; 
 
}

<div class="table-row"> 
 
    <div class="cell title">1</div> 
 
    <div class="cell title">2</div> 
 
    <div class="cell title">3</div> 
 
    <div class="cell title">4</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell">content 1</div> 
 
    <div class="cell">content 2</div> 
 
    <div class="cell">content 3</div> 
 
    <div class="cell">content 4</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell colspan">how-do-I-make-this-colspan-the-whole-width-of-the-table-row?</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell">content 1</div> 
 
    <div class="cell">content 2</div> 
 
    <div class="cell">content 3</div> 
 
    <div class="cell">content 4</div> 
 
</div>

それはあまりにも

.table-row { 
 
    display: table; 
 
    width: 50%; 
 
    table-layout: fixed; 
 
    background: #ccc; 
 
    border-top: 1px solid #000 
 
} 
 
.table-row:last-child { 
 
    border-bottom: 1px solid #000 
 
} 
 
.cell { 
 
    display: table-cell; 
 
    padding: 3px; 
 
    border-left: 1px solid #000; 
 
    color: #111; 
 
} 
 
.cell:last-child { 
 
    border-right: 1px solid #000 
 
} 
 
.title { 
 
    font-weight: 700; 
 
    background-color: #333; 
 
    color: #ccc; 
 
} 
 
.colspan { 
 
    background-color: #32cd32 
 
}

<div class="table-row"> 
 
    <div class="cell title">1</div> 
 
    <div class="cell title">2</div> 
 
    <div class="cell title">3</div> 
 
    <div class="cell title">4</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell">content 1</div> 
 
    <div class="cell">content 2</div> 
 
    <div class="cell">content 3</div> 
 
    <div class="cell">content 4</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell colspan">how-do-I-make-this-colspan-the-whole-width-of-the-table-row?</div> 
 
</div> 
 
<div class="table-row"> 
 
    <div class="cell">content 1</div> 
 
    <div class="cell">content 2</div> 
 
    <div class="cell">content 3</div> 
 
    <div class="cell">content 4</div> 
 
</div>