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

嗨，我使用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>

还有谁能给我一个更明确的定义什么是表格布局

你的代码有两个错误。

你的总百分比超过100%，这将使表比你预期的错误。
更重要的是，您已经将两个表中的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>

相关内容

最新更新

热门标签：