当前位置：首页 > 行业动态 > 正文

html如何固定单元格宽度自适应宽度

admin
行业动态
2024-04-01
4848

要固定单元格宽度并使其自适应宽度，可以使用HTML的表格标签<table>和<td>来实现，下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>固定单元格宽度</title>
    <style>
        /* 设置表格样式 */
        table {
            bordercollapse: collapse; /* 合并边框 */
            width: 100%; /* 表格宽度 */
        }
        
        th, td {
            border: 1px solid black; /* 设置边框样式 */
            padding: 8px; /* 设置内边距 */
            textalign: left; /* 文本对齐方式 */
        }
        
        /* 固定列宽 */
        .fixedwidth {
            width: 200px; /* 设置固定列宽度 */
        }
    </style>
</head>
<body>
    <h2>固定单元格宽度</h2>
    <table>
        <tr>
            <th >姓名</th>
            <th >年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td >张三</td>
            <td >25</td>
            <td>男</td>
        </tr>
        <tr>
            <td >李四</td>
            <td >30</td>
            <td>女</td>
        </tr>
    </table>
</body>
</html>

在上面的示例中，我们使用了CSS样式来定义表格的外观和布局，通过将需要固定的列的<th>或<td>元素添加一个类名fixedwidth，可以指定这些列的固定宽度为200px，其他列则使用默认的自适应宽度。