gpt4 book ai didi

html - 伪造CSS表格布局支持colspan

转载 作者:太空宇宙 更新时间:2023-11-03 18:55:02 24 4
gpt4 key购买 nike

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

<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 |
+-------------+------------+

有谁知道我怎样才能使它工作?

最佳答案

试试这个。

<!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>

关于html - 伪造CSS表格布局支持colspan,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13735129/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com