1

我正在尝试制作一个网页，其中包含以下代码：

<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 回答