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

    如果对table设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效。

    解决方法:

    在tbody前面加

    
            <col style="width: 100px;"/>
            <col>
            <col style="width: 100px;"/>
            <col style="width: 100px;"/>
            <col style="width: 100px;"/>
    
    .detail {
        padding-bottom: 50px;
        margin-top: 80px;
    }
    
    .detail_table {
        table-layout:fixed;/*列宽由表格宽度和列宽度设定。*/
        margin: auto;/*table居中*/
        text-align: center;
        border: 1px solid #804040;
        border-collapse: collapse;
    }
    
    .detail_table th {
        padding: 26px;;
    }
    
    .detail_table td {
        border: 1px solid #804040;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    
    .special {
        text-align: left;
        padding-left: 20px;
    }
    
    
    
    <div class="detail">
    
        <table class="detail_table">
    
            <thead>
            <th colspan="5">选择的选项明细</th>
            </thead>
            <!--写的话就按照你写的宽度,但是如果你写的宽度占不满table它会按照你给的尺寸的比例平分至每个td-->
            <!--现在这么写就是四列是100px,没给数据的那一列占剩下的全部-->
            <col style="width: 100px;"/>
            <col>
            <col style="width: 100px;"/>
            <col style="width: 100px;"/>
            <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设置宽度无效内容请搜索lingkb以前的文章或继续浏览下面的相关文章,希望大家以后多多支持lingkb!

发表评论

发表评论