- 主题:用div代替table的弱问题
如下的html代码实现的效果,如果我在class为tblCol的div中去掉height属性
就无法实现table中的rowspan=*的那种效果了,但设置了height属性的话
则又不够灵活,因为table中每个cell的height可以是自动排版的.
有什么办法处理或改进这个问题呢?
test.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.container {width:500px;height:auto;border:0.2cm groove orange;align:center;}
.headFont {
color:#000000;
line-height:25px;
BORDER-TOP: white 1px solid;
BACKGROUND: #E8E6E3;
BORDER-LEFT: white 1px solid;
padding:3px;
text-align:center;
font-size: 12px;
}
.tblHead {float:left;border:0.2cm groove pink;}
.tblCol {float:left;border:0.2cm groove pink;}
</style>
</head>
<body>
<div class=container>
<div class="tblHead headFont" style="width:30%;">
标题1
</div>
<div class="tblHead headFont" style="width:30%;">
标题2
</div>
<div class="tblHead headFont" style="width:40%;">
标题3
</div>
<div class="tblCol" style="width:30%;height:100;">
11
</div>
<div class="tblCol" style="width:30%;height:50;">
12
</div>
<div class="tblCol" style="width:40%;height:50;">
13
</div>
<div class="tblCol" style="width:30%;height:50;">
22
</div>
<div class="tblCol" style="width:40%;height:50;">
23
</div>
</div>
<body>
</html>
--
修改:naiveteage FROM 211.99.222.*
FROM 211.99.222.*
没看懂你想问啥或想要表达啥意思
【 在 naiveteage (naiveteage) 的大作中提到: 】
: 如下的html代码实现的效果,如果我在class为tblCol的div中去掉height属性
: 就无法实现table中的rowspan=*的那种效果了,但设置了height属性的话
: 则又不够灵活,因为table中每个cell的height可以是自动排版的.
: ...................
--
FROM 211.100.227.*
就是想用div实现table的rowspan功能阿.
像下面那样:(看来相当麻烦啊。还是用会table好了)
test1.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
.container {width:500px;height:auto;border:0.2cm groove orange;align:center;}
.container .block { float: left; margin-bottom: -2000px; padding-bottom: 2000px;
border:0.2cm groove pink;}
.headFont {
color:#000000;
line-height:25px;
BORDER-TOP: white 1px solid;
BACKGROUND: #E8E6E3;
BORDER-LEFT: white 1px solid;
padding:3px;
text-align:center;
font-size: 12px;
}
.tblHead {float:left;border:0.2cm groove pink;}
.tblCol {float:left;border:0.2cm groove pink;}
</style>
</head>
<body>
<div class=container>
<div class="tblHead headFont" style="width:20%;">
标题1
</div>
<div class="tblHead headFont" style="width:40%;">
标题2
</div>
<div class="tblHead headFont" style="width:39.5%;">
标题3
</div>
<div class="block" style="width:20%;text-align:center;">
11<br>
</div>
<div class="block" style="width:79%;">
<div class="tblCol" style="width:50%;">
12
</div>
<div class="tblCol" style="width:50%;">
13
</div>
<div class="tblCol" style="width:50%;">
22
</div>
<div class="tblCol" style="width:50%;">
23
</div>
</div>
<div class="block" style="width:20%;text-align:center;">
11<br>
</div>
<div class="block" style="width:79%;">
<div class="tblCol" style="width:50%;">
12
</div>
<div class="tblCol" style="width:50%;">
13
</div>
<div class="tblCol" style="width:50%;">
22
</div>
<div class="tblCol" style="width:50%;">
23
</div>
</div>
</div>
<body>
</html>
【 在 shaolin (叶孤城|漫漫当爹路) 的大作中提到: 】
: 没看懂你想问啥或想要表达啥意思
--
FROM 211.99.222.*
你明明在绘制一个表格
为啥不用表格呢?
【 在 naiveteage (naiveteage) 的大作中提到: 】
: 如下的html代码实现的效果,如果我在class为tblCol的div中去掉height属性
: 就无法实现table中的rowspan=*的那种效果了,但设置了height属性的话
: 则又不够灵活,因为table中每个cell的height可以是自动排版的.
: ...................
--
FROM 61.135.165.*
钻牛角尖了呗 。
另外这代码只能在quirks 模式下运行。
【 在 diysimon (猪国的明天) 的大作中提到: 】
: 你明明在绘制一个表格
: 为啥不用表格呢?
--
FROM 61.48.69.*
不是说表格慢么
不过应该总体布局用div,
小的表格有些情况下看来还是需要的
【 在 diysimon (猪国的明天) 的大作中提到: 】
: 你明明在绘制一个表格
: 为啥不用表格呢?
--
FROM 211.99.222.*
把表格还给表格就行了
【 在 naiveteage (naiveteage) 的大作中提到: 】
: 不是说表格慢么
: 不过应该总体布局用div,
: 小的表格有些情况下看来还是需要的
: ...................
--
FROM 166.111.39.29
不兼容firefox
【 在 naiveteage (naiveteage) 的大作中提到: 】
: 如下的html代码实现的效果,如果我在class为tblCol的div中去掉height属性
: 就无法实现table中的rowspan=*的那种效果了,但设置了height属性的话
: 则又不够灵活,因为table中每个cell的height可以是自动排版的.
: ...................
--
FROM 222.131.115.*