• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    html解决table设置宽度无效的问题

    发布者: 浪子 | 发布时间: 2025-8-16 18:19| 查看数: 71| 评论数: 0|帖子模式

    如果对table设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效。
    解决方法:
    在tbody前面加
    1.         <col style="width: 100px;"/>
    2.         <col>
    3.         <col style="width: 100px;"/>
    4.         <col style="width: 100px;"/>
    5.         <col style="width: 100px;"/>
    复制代码
    1. .detail {
    2.     padding-bottom: 50px;
    3.     margin-top: 80px;
    4. }

    5. .detail_table {
    6.     table-layout:fixed;/*列宽由表格宽度和列宽度设定。*/
    7.     margin: auto;/*table居中*/
    8.     text-align: center;
    9.     border: 1px solid #804040;
    10.     border-collapse: collapse;
    11. }

    12. .detail_table th {
    13.     padding: 26px;;
    14. }

    15. .detail_table td {
    16.     border: 1px solid #804040;
    17.     padding-top: 16px;
    18.     padding-bottom: 16px;
    19. }

    20. .special {
    21.     text-align: left;
    22.     padding-left: 20px;
    23. }
    复制代码
    1. <div class="detail">    <table class="detail_table">        <thead>        <th colspan="5">选择的选项明细</th>        </thead>        <!--写的话就按照你写的宽度,但是如果你写的宽度占不满table它会按照你给的尺寸的比例平分至每个td-->        <!--现在这么写就是四列是100px,没给数据的那一列占剩下的全部-->        <col style="width: 100px;"/>
    2.         <col>
    3.         <col style="width: 100px;"/>
    4.         <col style="width: 100px;"/>
    5.         <col style="width: 100px;"/>        <tbody>        <tr>            <td>                序号            </td>            <td>                症状            </td>            <td>                符合            </td>            <td>                不符合            </td>            <td>                不确定            </td>        </tr>        <?php $i = 1; ?>        <?php foreach ($test as $item): ?>            <!--拿到选择项-->            <?php $temp = $this->session->userdata('b' . $i) ?>            <tr>                <td>                    <?php echo $i; ?>                </td>                <td>                    <?php echo $item; ?>                </td>                <td>                    <?php if ($temp == 1): ?>√<?php endif ?>                </td>                <td>                    <?php if ($temp == 2): ?>√<?php endif ?>                </td>                <td>                    <?php if ($temp == 3): ?>√<?php endif ?>                </td>            </tr>            <?php $i++; ?>        <?php endforeach; ?>        </tbody>    </table></div>
    复制代码
    到此这篇关于html解决table设置宽度无效的问题的文章就介绍到这了,更多相关table设置宽度无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    来源:互联网
    免责声明:如果侵犯了您的权益,请联系站长(1277306191@qq.com),我们会及时删除侵权内容,谢谢合作!

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表