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>CodePudding user response：
Maybe you can approach this way?? Then just adjust it on media query.. Just a thought..
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;
}
thead {border-bottom: 0px solid red; position: relative}
thead th:nth-child(1) {
position: relative;
left: 10px;}
thead th:nth-child(2) {
position: absolute;
right: 140px;
top: 0;
}
thead th:nth-child(3) {
position: absolute;
right: 65px;
top: 0;
}<!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>
<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>CodePudding user response：
Use grid display. Grid lets you fix the width of the columns. Give the thead tr and tbody tr a 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: block separates them, you will need to set the width of the cells manually. Instead of setting the width in px or others, control them dynamically using a grid.
The scrollbar's width breaks the alignment. Hence, I updated the tbody overflow to overlay.
div {
display: flex;
justify-content: center;
margin-top: 100px;
}
table {
border: 1px solid red;
table-layout: auto;
border-collapse: collapse;
text-align: left;
}
tbody {
border-top: 1px solid red;
display: block;
width: 100%;
overflow: overlay;
height: 300px;
}
tbody tr{
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 8px;
}
thead tr {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 8px;
}
thead th,
tbody th,
tbody td {
padding: 12px 20px 12px 20px;
}
I used a ratio 2:1:1 since this made the table elements you provided to fit nicely. Check the result on this pen.
I hope this helps.