Reputation: 1
How to align the tabs in table in place?
Hello everyone, I am new to HTML and CSS and have a bit of a problem I am trying to create a database example here but the layout is not lining up correctly. I changed the width of it but I tried to make it auto or fixed but still the same problem. Any help will be appreciated, Thank you in advance.
.table_read {
font: arial;
padding: 22px;
border-radius: 25px;
}
td,
th {
border: -2px solid white;
text-align: left;
padding: 8px;
width: 20%;
}
th {
background-color: red;
color: white;
border: solid red;
width: 20%;
}
/*scrolling the table layout*/
#table-scroll {
height: 200px;
overflow: auto;
margin-top: 20px;
}
#table-wrapper table {
width: 100%;
}
#table-headlines tr:nth-child(even) {
background-color: #dddddd;
}<div class="table_read" style="border: 12px red;">
<div class="tabs">
<table>
<tr>
<th colspan=6 style="">
<div>
<h2> Search By: </h2>
<input type="text" placeholder="Search" style="">
<input type="radio" value="First">
<label for="First_name">First</label>
<input type="radio" value="last">
<label for="Last_name">Last</label>
<input type="radio" value="Date">
<label for="Date_rec">Date</label>
<input type="radio" value="Conf_num">
<label for="Confirmation_Number">Confirm Num.</label>
<button style="width: auto; float: right;">Search
<thread>
<tr>
<th><span class="text">Date</th>
<th><span class="text">First</th>
<th><span class="text">Last</th>
<th><span class="text">Phone</th>
<th><span class="text">Confimation</th>
<th><span class="text">Edit</th>
</tr>
</thread>
<div>
</th>
</tr>
</table>
<div id="table-headlines">
<div id="table-scroll">
<table>
<!-- examples listed -->
<tbody>
<tr>
<td>3/12/21</td>
<td>Margin</td>
<td>Billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/1/21</td>
<td>Bard</td>
<td>Thomas</td>
<td>553-3456</td>
<td>834322121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/6/21</td>
<td>Jhon</td>
<td>billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>Upvotes: 0
Views: 476
Answers (1)
Reputation: 3453
Here is a modified version of the code you posted that is simplified a bit. I think you will find that it works well for your use case.
I applied position: sticky to the <thead> element which keeps the top section from scrolling when the table rows scroll.
I also prevented the vertical 2px table shift at the top of the scroll by adding border-spacing: 0 to the <table> css.
I also added
body {
overflow-y: hidden;
}
but only to prevent an extra scroll bar when veiwing the snippet. It is perhaps not necessary for your layout.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-y: hidden;
}
.table_read {
font: arial;
padding: 22px;
border-radius: 25px;
border: 1px solid red;
width: fit-content;
}
td,
th {
text-align: left;
padding: 8px;
border: 1px solid white;
width: 16.6666%;
}
th {
background-color: red;
color: white;
}
thead {
position: sticky;
top: 0;
}
#table-headlines {
display: block;
height: 200px;
width: fit-content;
overflow-y: auto;
border-spacing: 0; /* <----- This is what prevents vertical table shift when scrolling to top */
}
#table-headlines tr:nth-child(even) {
background-color: #dddddd;
}<div class="table_read">
<table id="table-headlines">
<thead>
<tr>
<th colspan=6>
<div>
<h2> Search By: </h2>
<input type="text" placeholder="Search" style="">
<input type="radio" value="First">
<label for="First_name">First</label>
<input type="radio" value="last">
<label for="Last_name">Last</label>
<input type="radio" value="Date">
<label for="Date_rec">Date</label>
<input type="radio" value="Conf_num">
<label for="Confirmation_Number">Confirm Num.</label>
<button>Search</button>
</div>
</th>
</tr>
<tr>
<th><span class="text">Date</span></th>
<th><span class="text">First</span></th>
<th><span class="text">Last</span></th>
<th><span class="text">Phone</span></th>
<th><span class="text">Confimation</span></th>
<th><span class="text">Edit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>3/12/21</td>
<td>Margin</td>
<td>Billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/1/21</td>
<td>Bard</td>
<td>Thomas</td>
<td>553-3456</td>
<td>834322121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/6/21</td>
<td>Jhon</td>
<td>billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>3/12/21</td>
<td>Margin</td>
<td>Billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/1/21</td>
<td>Bard</td>
<td>Thomas</td>
<td>553-3456</td>
<td>834322121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/6/21</td>
<td>Jhon</td>
<td>billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
</tbody>
</table>
</div>EDIT: Based on your comment It sounds like you want equal-width columns based on the widest column.
I added table-layout: fixed; and width: 100%; to the table and removed width: fit-content.
This makes all cells the same width as the widest column, but only when there is enough room in the parent container to accommodate the table width. If there is not enough room in the parent container, then the widest cell will use as much width as needed and the remaining columns will share the remaining width equally. Which is a reasonable fallback.
Here is a snippet (Make sure to view it in both the small snippet result window and the full-page window to see the desired result and the fallback result):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-y: hidden;
}
.table_read {
font: arial;
padding: 22px;
border-radius: 25px;
border: 1px solid red;
width: fit-content;
}
td,
th {
text-align: left;
padding: 8px;
border: 1px solid white;
width: 16.6666%;
}
th {
background-color: red;
color: white;
}
thead {
position: sticky;
top: 0;
}
#table-headlines {
display: block;
height: 200px;
table-layout: fixed; /* <----- Makes all columns equal to widest column */
width: 100%; /* <----- Makes all columns equal to widest column */
/* width: fit-content; <----- Removed this line */
overflow-y: auto;
border-spacing: 0; /* <----- This is what prevents vertical table shift when scrolling to top */
}
#table-headlines tr:nth-child(even) {
background-color: #dddddd;
}<div class="table_read">
<table id="table-headlines">
<thead>
<tr>
<th colspan=6>
<div>
<h2> Search By: </h2>
<input type="text" placeholder="Search" style="">
<input type="radio" value="First">
<label for="First_name">First</label>
<input type="radio" value="last">
<label for="Last_name">Last</label>
<input type="radio" value="Date">
<label for="Date_rec">Date</label>
<input type="radio" value="Conf_num">
<label for="Confirmation_Number">Confirm Num.</label>
<button>Search</button>
</div>
</th>
</tr>
<tr>
<th><span class="text">Date</span></th>
<th><span class="text">First</span></th>
<th><span class="text">Last</span></th>
<th><span class="text">Phone</span></th>
<th><span class="text">Confirmation</span></th>
<th><span class="text">Edit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>3/12/21</td>
<td>Marginabcdefghijklmnopqrs</td>
<td>Billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/1/21</td>
<td>Bard</td>
<td>Thomas</td>
<td>553-3456</td>
<td>834322121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/6/21</td>
<td>Jhon</td>
<td>billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>3/12/21</td>
<td>Margin</td>
<td>Billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/1/21</td>
<td>Bard</td>
<td>Thomas</td>
<td>553-3456</td>
<td>834322121</td>
<td>Add/Del</td>
</tr>
<tr>
<td>1/6/21</td>
<td>Jhon</td>
<td>billy</td>
<td>555-3456</td>
<td>234152121</td>
<td>Add/Del</td>
</tr>
</tbody>
</table>
</div>Upvotes: 1