1

次のコードを含む 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 |
+-------------+------------+

誰も私がこれを機能させる方法を知っていますか?

4

1 に答える 1

0

これを試して。

<!DOCTYPE html>
<html lang="en-US">
<head>
<style type="text/css">
.table { width: 600px; margin: 0 auto; }
.header { background-color: #CCCCCC; font-weight: bold; margin: 0; }
.row { border-bottom: 1px solid #000000; }
.col1 { float: left; width: 50%; }
.col2 { float: none; width: 100%; }
.clear { clear: both; }
</style>
</head>
<body>
<div class="table">
  <div class="row">
    <h4 class="header">Header Title</h4>
  </div>
  <div class="row">
    <div class="col1">Col 1</div>
    <div class="col1">Col 2</div>
    <div class="clear"></div><!-- clear floated elements -->
  </div>
  <div class="row">
    <div class="col2">Two columns</div>
    <div class="clear"></div><!-- clear floated elements -->
  </div>
</div>
</body>
</html>
于 2012-12-06T00:57:58.667 に答える