ディスプレイプロパティを使用して<table>をエミュレートするときに、テーブルヘッダーをテーブル全体に広げる方法を教えてください。

Question

私はDivsから作られた新しいテーブルに古いテーブルを置き換えました。 見出しに複数のセルがある表の見出しのcss clasではなく、表の空白の幅にまたがる見出しが必要です。 私はちょうどそれを私はcolspanを試して動作することはできませんが、これは動作しませんでしたdivtablesのためのものではないので。

ここに私のテーブルの小さな例があります。

.divTableCell{ 
 
    border: 1px solid #999999; 
 
    display: table-cell; 
 
    padding: 3px 10px; 
 
    background-color: #ffffff; 
 
    width: 50%; 
 
} 
 
.divTableRow { 
 
    display: table-row; 
 
    width: 100%; 
 
}

<div class="divTableRow"> 
 
    <div class="divTableCell">1</div> 
 
    <div class="divTableCell">2</div> 
 
    <div class="divTableCell">3</div> 
 
    </div>

毎回

は、私はそれが唯一の左テーブルセルの上に収まるようにTalbe-見出しクラスでヘッダーを作成しようとしました。

ありがとうございます。

Answer 1

ヘッダーに表題を付けることができます。以下の例を参照してください：

.divTableCell{ 
 
    border: 1px solid #999999; 
 
    display: table-cell; 
 
    padding: 3px 10px; 
 
    background-color: #ffffff; 
 
    width: 50%; 
 
} 
 
.table { 
 
    display: table; 
 
} 
 
.divTableRow { 
 
    display: table-row; 
 
    width: 100%; 
 
} 
 
.header { 
 
    display: table-caption; 
 
    border: 1px solid #ccc; 
 
}

<div class="table"> 
 
    <div class="header"> This is a test</div> 
 
    <div class="divTableRow"> 
 
    <div class="divTableCell">1</div> 
 
    <div class="divTableCell">2</div> 
 
    <div class="divTableCell">3</div> 
 
    </div> 
 
</div>

Answer 2

.divTableCell{ 
    border: 1px solid #999999; 
    display: table-cell; 
    padding: 3px 10px; 
    background-color: #ffffff; 
    width: 50%; 
} 
.divTableRow { 
    display: table-row; 
    width: 100%; 
} 

<div style="width:100%;"> 
<div style="border:1px solid #000;" ><b>header</b></div> 
<div class="divTableRow"> 
    <div class="divTableCell">1</div> 
    <div class="divTableCell">2</div> 
    <div class="divTableCell">3</div> 
</div> 
</div>