可滚动表主体，带有固定标头列不对齐
在查看了与堆栈跨流的不同帖子之后，我用固定的标头和可滚动的主体完成了表就像附加的代码链接一样，具有不同的宽度。但是，在这里，我们面临的问题是表标头列名称移到表的左侧，创建了一个表对齐问题。我正在寻找经验丰富的开发人员的帮助。谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
display: flex;
justify-content: center;
margin-top: 100px;
}
table {
border: 1px solid red;
table-layout: fixed;
border-collapse: collapse;
text-align: left;
}
tbody {
border-top: 1px solid red;
display: block;
width: 100%;
overflow: auto;
height: 300px;
}
thead tr {
display: block;
}
thead th,
tbody th,
tbody td {
padding: 12px 20px 12px 20px;
}
</style>
<body>
<div className="table-wrapper">
<table>
<thead>
<tr>
<th scope="col">
Name
</th>
<th scope="col">
Total Workflows
</th>
<th scope="col">
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Update The SystemConfiguration Table To Reflect Your Request Processor Names Along With
Processing Options.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Verify Connectivity From Production Servers To The Production LPAR.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Update The SystemConfiguration Table To Reflect Your Request Processor Names Along With
Processing Options.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Verify Connectivity From Production Servers To The Production LPAR.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Update The SystemConfiguration Table To Reflect Your Request Processor Names Along With
Processing Options.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Verify Connectivity From Production Servers To The Production LPAR.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>After looking different posts from Stack-overflow I did the table with fixed header and scrollable body but in all the posts people gave solution that had tables with fixed width columns where every columns had same width but I am trying to make a table where every column has different width just like the code link attached. But here the problem that we face is that the table header column names moves to the left of the table creating a table alignment issue. I am looking for experienced developers help. Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
display: flex;
justify-content: center;
margin-top: 100px;
}
table {
border: 1px solid red;
table-layout: fixed;
border-collapse: collapse;
text-align: left;
}
tbody {
border-top: 1px solid red;
display: block;
width: 100%;
overflow: auto;
height: 300px;
}
thead tr {
display: block;
}
thead th,
tbody th,
tbody td {
padding: 12px 20px 12px 20px;
}
</style>
<body>
<div className="table-wrapper">
<table>
<thead>
<tr>
<th scope="col">
Name
</th>
<th scope="col">
Total Workflows
</th>
<th scope="col">
Actions
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Update The SystemConfiguration Table To Reflect Your Request Processor Names Along With
Processing Options.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Verify Connectivity From Production Servers To The Production LPAR.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Update The SystemConfiguration Table To Reflect Your Request Processor Names Along With
Processing Options.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Verify Connectivity From Production Servers To The Production LPAR.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Order The Server Hardware For Production As Well As Test/Quality Assurance (QA).
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Update The SystemConfiguration Table To Reflect Your Request Processor Names Along With
Processing Options.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
<tr>
<th scope="row">
Verify Connectivity From Production Servers To The Production LPAR.
</th>
<td>
90
</td>
<td>
<button>Submit</button>
<button>Publish</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用网格显示。网格使您可以修复列的宽度。给出
thead tr和tbody tr网格显示，并根据需要设置列的宽度。由于标头和表的正文相互连接，并且
显示：块将它们分开，因此您需要手动设置单元格的宽度。而不是使用网格动态控制px或其他设置宽度。滚动条的宽度打破了对齐。因此，我更新了
tbody溢出Overlay。我使用了一个比率
2：1：1，因为这使您提供了适合的表元素。检查这支笔。我希望这会有所帮助。
Use grid display. Grid lets you fix the width of the columns. Give the
thead trandtbody tra grid display and set the width of the columns as desired.Since the header and the body of the table are connected to each other and
display: blockseparates them, you will need to set the width of the cells manually. Instead of setting the width inpxor others, control them dynamically using a grid.The scrollbar's width breaks the alignment. Hence, I updated the
tbodyoverflowtooverlay.I used a ratio
2:1:1since this made the table elements you provided to fit nicely. Check the result on this pen.I hope this helps.
也许您可以这样接近？然后只需在媒体查询中调整它..只是一个想法..
Maybe you can approach this way?? Then just adjust it on media query.. Just a thought..