表 th 和 td 未正确对齐



我的表显示不正确。我通常在后端工作,而不是在前端,我不知道如何解决它:(

表id=#students

这是我为该表创建的css:

#students {
display:table;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0 auto;
width: 95%;
table-layout:fixed;
margin-top: 50px;
border-collapse: collapse;
}
#students tr{
display:table;
width:95%;
table-layout:fixed;
}
#students td, #students th {
border: 1px solid #ddd;
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
#students tr:nth-child(even){background-color: #f2f2f2;}
#students tr:hover {background-color: #ddd;}
#students th {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #F05040;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<style>
#students {
display:table;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0 auto;
width: 95%;
table-layout:fixed;
margin-top: 50px;
border-collapse: collapse;
}
#students tr{
display:table;
width:95%;
table-layout:fixed;
}
#students td, #students th {
border: 1px solid #ddd;
padding: 8px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
#students tr:nth-child(even){background-color: #f2f2f2;}
#students tr:hover {background-color: #ddd;}
#students th {
cursor: pointer;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #F05040;
color: white;
}
</style>
</head>
<body>
<table id="students">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
</body>
</html>

你的代码运行良好,你能检查一下是否应用了相同的CSS代码吗。

最新更新