[已解决]html5表格大小问题

gray_dove · 发表于 2018-5-30 15:56:32

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

如图，“值班人员”处表格内容无法设置宽度相等
如果先设置了那里的宽度，下面“值班领导”部分会不相等
弄了半天，怎么也弄不好

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.Form
{
font-family: "微软雅黑";
font-size: 13px;
width: 400px;
height: 500px;
}
.tab1{
width:48px;
}
.tab{
border:solid 1px #dbdee1;
border-collapse: collapse;
word-break: break-all;
word-wrap: break-word;
overflow: hidden;
}
.tab td{
border:solid 1px #dbdee1;
text-align: center;
table-layout: fixed;
height:19px;
}
.thr{
width:64px;
height:20px;
}
</style>
</head>
<body>
<div class = "Form">
<table class="tab">
<tr>
<td></td>
<td colspan="6">值班组</td>
<td colspan="6">备勤组</td>
</tr>
<tr>
<td class="tab1">值班领导</td>
<td colspan="6">XXX</td>
<td colspan="6">XXX</td>
</tr>
<tr>
<td class="tab1">值班组长</td>
<td colspan="6">XXX</td>
<td colspan="6">XXX</td>
</tr>
<tr>
<td rowspan="6" class="tab1">值班人员</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
</tr>
<tr>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
</tr>
<tr>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
</tr>
<tr>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
</tr>
<tr>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
</tr>
<tr>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
<td class="sec" colspan="3">XXX</td>
</tr>
<tr>
<td rowspan="3">值班领导</td>
<td class="thr" colspan="4">XXX</td>
<td class="thr" colspan="4">XXX</td>
<td class="thr" colspan="4">XXX</td>
</tr>
<tr>
<td class="thr" colspan="4">XXX</td>
<td class="thr" colspan="4">XXX</td>
<td class="thr" colspan="4">XXX</td>
</tr>
<tr>
<td class="thr" colspan="4">XXX</td>
<td class="thr" colspan="4">XXX</td>
<td class="thr" colspan="4">XXX</td>
</tr>
<tr>
<td>驾驶员</td>
<td colspan="12">XXX</td>
</tr>
</table>
</div>
</body>

复制代码

最佳答案

月排行榜 / 总排行榜

不二如是

2018-5-30 17:03:28

1、请为tr下的第一个td，所有添加class：class="tab1"，鱼油有的项没有加。

2、为class="tab1"，设置宽度，鱼油写的是：

.tab1{
width:48px;
}

复制代码

固定宽度写小了，手动改成55px，效果：

跳转到最佳答案楼层

ddd-115 · 发表于 2018-5-30 17:00:04

<table class="tab"></table>在这里设置固定宽度，比如：width="400"这样，试试看

ddd-115 · 发表于 2018-5-30 17:01:44

还有，你得把table-layout: fixed;这个属性设置到table，不能设置在td这边

不二如是 · 发表于 2018-5-30 17:03:28

1、请为tr下的第一个td，所有添加class：class="tab1"，鱼油有的项没有加。

2、为class="tab1"，设置宽度，鱼油写的是：

.tab1{
width:48px;
}

复制代码

固定宽度写小了，手动改成55px，效果：

gray_dove · 发表于 2018-5-30 19:18:07

不二如是发表于 2018-5-30 17:03
1、请为tr下的第一个td，所有添加class：class="tab1"，鱼油有的项没有加。

2、为class="tab1"，设置宽 ...

值班人员的值班组，备勤组单元格大小还是不一样

未命名.bmp · 发表于 2018-6-1 10:44:57

在<td>标签中添加colspan属性，值为要横向合并的单元格数目

未命名.bmp · 发表于 2018-6-1 10:46:33

表格中内嵌表格也是个解决方案

账号		自动登录	找回密码
密码			立即注册