html - 表 th 和 td 没有正确对齐
问题描述
我的表格显示不正确。我通常在后端工作,而不是在前端工作,我不知道如何解决它:(
表编号=#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 代码。
推荐阅读
- spring-boot - 启用 SSL 的 Spring feign 中的 TrustStore 配置问题
- python-3.x - 键入自定义集类
- nativescript - navigateTo 在 Nativescript-Vue 上不起作用
- vb.net - 获取局域网中所有PC的列表
- mysql - WordPress MySQL 查询优化
- javascript - 重定向到另一个页面后有没有办法保持登录状态?
- rebus - Rebus Saga:当订阅者发送给发布者时,消息没有以正确的顺序到达
- couchdb - 如何从 couchDb 选择器的数组中选择一个嵌套元素?
- java - Java 8 的 Cipher.getInstance 慢
- html - 使用 Chrome 打印时,HTML 主题边框部分显示在上一页上