css 为什么表布局属性不保持单元格尺寸固定

yyyllmsg 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(117)

你好，我使用的是html表格+ css属性，这在我的教科书中有提到（我们在课堂上学过）。基本上，我的错误是，布局对我在格式中指定的表格的维度没有太大的影响。更多参考请参见代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Employees table</title>
    <style>
        body{background-color:RGB(255,251,214)}
        table,td,tr,th{border:1px solid blue}
        tr{hover:background-color:blue}
        th{text-align:center}
        table{table-layout:fixed;}
        td{vertical-align:middle}
        h2{color:red}
    </style>
</head>
<body>
<h2>Table layout fixed</h2>
<table style="table-layout:auto">
    <tr>
        <th width=" 40%">Emp-id</th>
        <th width = 30%>Name</th>
        <th width = 17%>Basic</th>
        <th width = 28%>HRA</th>
    </tr>
    <tr><td>101</td><td>Ajay</td><td>20000000000000</td><td>300</td></tr>
    <tr><td>102</td><td>Shashi</td><td>15000000000000000</td><td>2800</td></tr>
    <tr><td>103</td><td>Mukesh</td><td>130000</td><td>2000</td></tr>
</table>
<h2>Table layout auto</h2>
<table style="table-layout:auto">
    <tr>
        <th width= "40%">Emp-id</th>
        <th width = 30%>Name</th>
        <th width = 10%>Basic</th>
        <th width = 28%>HRA</th>
    </tr>
    <tr><td>101</td><td>Ajay</td><td>20000000000000</td><td>300</td></tr>
    <tr><td>102</td><td>Shashi</td><td>15000000000000000</td><td>2800</td></tr>
    <tr><td>103</td><td>Mukesh</td><td>130000</td><td>2000</td></tr>
</table>
</body>
</html>

另外，有人能给予我一个更清晰的定义是什么表布局

css

来源：https://stackoverflow.com/questions/74767402/why-is-the-table-layout-property-not-keeping-the-cell-dimensions-fixed

1条答案

按热度按时间

von4xj4u1#

您的代码中有两个错误。
1.您的总百分比超过100%，这将使表出现超出预期的错误。
1.更重要的是，您已经将两个表中的table-layout覆盖为auto，因此table-layout: fixed将不起作用，因此您看不到区别。
现在更正了这个问题，您将看到您写入固定表td中的字符串数据溢出到外部，并且使用自动布局，单元格将只扩展，直到它强制所有其他单元格为最小宽度，然后使表更大以适应内容。要解决这个问题，您可以在td中使用word-break: break-all强制断开字符串以适应单元格的定义宽度。
哦，你写的:hover也错了，所以它不会工作，修复它在演示给你。

body{background-color:RGB(255,251,214)}
table,td,tr,th{border:1px solid blue}
tr:hover{background-color:blue}
th{text-align:center}
table{table-layout:fixed;width: 100%;}
td{vertical-align:middle; word-break: break-all}
h2{color:red}

<table style="">
    <tr>
        <th width="35%">Emp-id</th>
        <th width="30%">Name</th>
        <th width="17%">Basic</th>
        <th width="18%">HRA</th>
    </tr>
    <tr><td>101</td><td>Ajay</td><td>20000000000000</td><td>300</td></tr>
    <tr><td>102</td><td>Shashi</td><td>150000000000000000000000000000000000000000000000000000000000000000000000000000000000</td><td>2800</td></tr>
    <tr><td>103</td><td>Mukesh</td><td>130000</td><td>2000</td></tr>
</table>
<h2>Table layout auto</h2>
<table style="table-layout:auto">
    <tr>
        <th width= "30%">Emp-id</th>
        <th width ="40%">Name</th>
        <th width ="10%">Basic</th>
        <th width ="20%">HRA</th>
    </tr>
    <tr><td>101</td><td>Ajay</td><td>20000000000000</td><td>300</td></tr>
    <tr><td>102</td><td>Shashi</td><td>150000000000000000000000000000000000000000000000000000000000000000000000000000000000</td><td>2800</td></tr>
    <tr><td>103</td><td>Mukesh</td><td>130000</td><td>2000</td></tr>
</table>

赞(0）回复(0）举报 2022-12-15

我来回答

css 为什么表布局属性不保持单元格尺寸固定

1条答案

相关问题

热门标签

最新问答