次のコードを含む Web ページを作成しようとしています。
<STYLE TYPE="text/css">
.table{
display:table;
}
.caption{
display:table-caption;
}
.tbody{
display:table-row-group;
}
.tr{
display:table-row;
}
.td,
.th{
display:table-cell
}
.td[colspan="2"],
.th[colspan="2"]{
/* I don't know what to put here */
}
</STYLE>
<DIV CLASS="table">
<SPAN CLASS="caption">Caption Text</SPAN>
<DIV CLASS="tbody">
<DIV CLASS="tr">
<DIV CLASS="th" COLSPAN="2">Main header<DIV>
</DIV>
<DIV CLASS="tr">
<DIV CLASS="td">Non-data 1</DIV>
<DIV CLASS="td">Non-data 2</DIV>
</DIV>
<DIV CLASS="tr">
<DIV CLASS="td">Non-data 3</DIV>
<DIV CLASS="td">Non-data 4</DIV>
</DIV>
</DIV>
</DIV>
すべて非表形式のデータであるため、テーブルの代わりにこれを選択しました。私の意図はわかると思いますが、うまくいきません。コードがわかりにくい場合は、次のように表示します。
Caption Text
+-------------------------+
| Main header |
+------------+------------+
| Non-data 1 | Non-data 2 |
+------------+------------+
| Non-data 3 | Non-data 4 |
+------------+------------+
しかし、それは次のように表示されます
Caption Text
+-------------+
| Main header |
+-------------+------------+
| Non-data 1 | Non-data 2 |
+-------------+------------+
| Non-data 3 | Non-data 4 |
+-------------+------------+
誰も私がこれを機能させる方法を知っていますか?