IT俱乐部 HTML html解决table设置宽度无效的问题

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

发布: 2024年 9月 14日 602阅读

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

解决方法：

在tbody前面加

1

.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">
 
     
session->userdata('b' . $i) ?>
 
            <table class="detail_table">
<thead>
<tr><th colspan="5">选择的选项明细</th>
        </tr></thead>
<colgroup><col style="width: 100px">
<col>
<col style="width: 100px">
<col style="width: 100px">
<col style="width: 100px">
</colgroup><tbody>
<tr>
<td>
                序号
            </td>
            <td>
                症状
            </td>
            <td>
                符合
            </td>
            <td>
                不符合
            </td>
            <td>
                不确定
            </td>
        </tr><tr>
<td>
                     
</td>
 
                <td>
                     
</td>
 
                <td>
                    √
</td>
                <td>
                    √
</td>
 
                <td>
                    √
</td>
 
            </tr>
 
</tbody>
</table>
</div>

到此这篇关于html解决table设置宽度无效的问题的文章就介绍到这了,更多相关table设置宽度无效内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/html/13469.html

39赞

标签:html table 宽度无效设置