关于html/css表格单元格宽度不同设置的问题
index.asp<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/...
index.asp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="cssss.css" rel="stylesheet" type="text/css">
<title>无标题文档</title>
</head>
<body>
<table id="customers">
<tr>
<td colspan="2" class="item1">留言人留言于时间</td>
<td class="item2">QQ 邮件</td>
</tr>
<tr>
<td colspan="2" class="item3">内容:</td>
<td class="item4">留言内容在此</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="item5"> </td>
<td class="item6">填写留言</td>
<td class="item7">管理留言</td>
</tr>
</table>
</body>
</html>
css文件
@charset "utf-8";
/* CSS Document */
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin:0 auto
}
#customers td
{
font-size:lem;
border:1px solid #98bf21;
padding:3px,7px
}
.item1
{
width:80%
}
.item2
{
width:20%
}
.item3
{
width:20%
}
.item4
{
width:80%
}
.item5
{
width:70%
}
.item6
{
width:15%
}
.item7
{
width:15%
}
怎么设置单元格不同宽度
运行结果如图，我想要内容那个单元格短一点，就像QQ邮件那个单元格那么短，是不是我不应该设置跨列，但我不设置跨列的话，运行结果很乱，我是定义每个item宽度，但是没有达到预期的效果
这个是定义每个item的宽度
@charset "utf-8";
/* CSS Document */
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin:0 auto
}
#customers td
{
font-size:lem;
border:1px solid #98bf21;
padding:3px,7px
}
.item1
{
width:500px
}
.item2
{
width:200px
}
.item3
{
width:200px
}
.item4
{
width:500px
}
.item5
{
width:400px
}
.item6
{
width:150px
}
.item7
{
width:150px
}
.item8
{
width:700px
}
item8指的是第三行空格的宽度 展开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="cssss.css" rel="stylesheet" type="text/css">
<title>无标题文档</title>
</head>
<body>
<table id="customers">
<tr>
<td colspan="2" class="item1">留言人留言于时间</td>
<td class="item2">QQ 邮件</td>
</tr>
<tr>
<td colspan="2" class="item3">内容:</td>
<td class="item4">留言内容在此</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td class="item5"> </td>
<td class="item6">填写留言</td>
<td class="item7">管理留言</td>
</tr>
</table>
</body>
</html>
css文件
@charset "utf-8";
/* CSS Document */
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin:0 auto
}
#customers td
{
font-size:lem;
border:1px solid #98bf21;
padding:3px,7px
}
.item1
{
width:80%
}
.item2
{
width:20%
}
.item3
{
width:20%
}
.item4
{
width:80%
}
.item5
{
width:70%
}
.item6
{
width:15%
}
.item7
{
width:15%
}
怎么设置单元格不同宽度
运行结果如图，我想要内容那个单元格短一点，就像QQ邮件那个单元格那么短，是不是我不应该设置跨列，但我不设置跨列的话，运行结果很乱，我是定义每个item宽度，但是没有达到预期的效果
这个是定义每个item的宽度
@charset "utf-8";
/* CSS Document */
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin:0 auto
}
#customers td
{
font-size:lem;
border:1px solid #98bf21;
padding:3px,7px
}
.item1
{
width:500px
}
.item2
{
width:200px
}
.item3
{
width:200px
}
.item4
{
width:500px
}
.item5
{
width:400px
}
.item6
{
width:150px
}
.item7
{
width:150px
}
.item8
{
width:700px
}
item8指的是第三行空格的宽度 展开
1个回答
展开全部
为什么不用表格跨行列来设置？是为了符合所为“标准”，并没有CSS控制单元格的跨行和跨列，表格的跨行和跨列属于其结构，而并非其表现，所以为什么要用CSS来控制。
表格就是表格该怎么用就怎么用，就算标准的描述也是“应该避免用表格来布局” 而不是“必须避免用表格来布局” 所以有些不是CSS做的事，该怎样就怎样不用纠结。
表格就是表格该怎么用就怎么用，就算标准的描述也是“应该避免用表格来布局” 而不是“必须避免用表格来布局” 所以有些不是CSS做的事，该怎样就怎样不用纠结。
追问
第一张图我用了啊，但是我要的是“内容”那个单元格短一些，短不了
追答
是要下面这种效果吗？
由于回复代码过长，不让发，所以参考代码自行下载附件。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
