[已解决]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

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

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