duplicate table borders with css - css

Is there a way to make the second table borders look the same as the first table?
table {
border: 1px solid black;
}
.top {
border-top: 1px solid black;
}
.bottom {
border-bottom: 1px solid black;
}
.right {
border-right: 1px solid black;
}
.left {
border-left: 1px solid black;
}
#fin td,
#fin tr {
padding: 0;
}
#fin tr{
border: 1px solid black;
}
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id='fin'>
<tr class='top'><!--
--><td class='top left'>HTML</td><!--
--><td class = 'top right'>★★★★★</td><!--
--><td class='top left'>Javascript</td><!--
--><td class='top right'>★</td><!--
--></tr><!--
--><tr class='bottom'><!--
--><td class='bottom left'>CSS</td><!--
--><td class = 'bottom right'>★★</td><!--
--><td class='bottom left'>Node</td><!--
--><td class='bottom right'>★</td><!--
--></tr>
</table>
<hr>
My Hobbies
Contact Me


I would play with pseudo element
table {
border: 1px solid black;
}
td[class] {
position: relative;
padding: 4px;
}
td[class]::before,
td[class]::after{
content:"";
position: absolute;
inset: var(--t,0) var(--r,0) var(--b,0) var(--l,0);
pointer-events: none;
border: solid black;
border-width: var(--w,0);
}
td[class]::after {
inset: var(--t,2px) var(--r,2px) var(--b,2px) var(--l,2px);
}
.top-left {--w: 1px 0 0 1px;--b:-4px;--r:-4px;}
.top-right {--w: 1px 1px 0 0;--b:-4px;--l:-4px;}
.bottom-left {--w: 0 0 1px 1px;--t:-4px;--r:-4px;}
.bottom-right {--w: 0 1px 1px 0;--t:-4px;--l:-4px;}
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id='fin'>
<tr>
<td class='top-left'>HTML</td>
<td class='top-right'>★★★★★</td>
<td class='top-left'>Javascript</td>
<td class='top-right'>★</td>
</tr>
<tr>
<td class='bottom-left'>CSS</td>
<td class='bottom-right'>★★</td>
<td class='bottom-left'>Node</td>
<td class='bottom-right'>★</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me


I made some changes to your code, and now they look the same. However, please be aware that I removed the "fin" id from the second table. So I suggest you choose a new ID for that one and start from there.
(I did not touch any of the CSS, essentially I just copied the first table over so they both look the same)
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table border="1">
<tr>
<td>
<table >
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table >
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table border="1">
<tr>
<td>
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</table>
<hr>
My Hobbies
Contact Me
</body>
</html>


If you match the structure of your second table to your first it should work. I have added a css class so as to not repeat the border style.
<style>
#borderForTable{
border:1px solid black
}
#borderForTD{
border:2px double black
}
</style>
<table id="borderForTable">
<tr>
<td id="borderForTD">
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td id="borderForTD">
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me
<br><br><br>
<table id="borderForTable">
<tr>
<td id="borderForTD">
<table>
<tr>
<td>HTML</td>
<td>★★★★★</td>
</tr>
<tr>
<td>CSS</td>
<td>★★</td>
</tr>
</table>
</td>
<td id="borderForTD">
<table>
<tr>
<td>Javascript</td>
<td>★</td>
</tr>
<tr>
<td>Node</td>
<td>★</td>
</tr>
</table>
</td>
</tr>
</table>
<hr>
My Hobbies
Contact Me

Related

How to have borders for only columns in Bootstrap table and not for rows?

What I have tried so far is added th and tfoot. After that I tried to apply border right and left for only td, If I try to apply border top and bottom for table, border is not being applied for table bottom. And also the border thickness or colour is being different when compared to 1st and last column
Below is the code snippet which I have tried
.table {
border: 1px solid black;
}
.table thead th {
border-top: 1px solid #000!important;
border-bottom: 1px solid #000!important;
border-left: 1px solid #000!important;
border-right: 1px solid #000!important;
}
.table td {
border-left: 1px solid #000!important;
border-right: 1px solid #000!important;
border-top: none!important;
}
tbody>tr:nth-child(odd) {
background: #F8F8F8
}
tfoot>tr:nth-child(odd),
thead {
background: #E3ECFC
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<table class="table table-borderless ">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>5</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tfoot>
</table>
</body>
</html>
Expected output

added tfoot>tr:last-of-type and thead>tr:first-of-type
tfoot>tr:nth-child(odd),
thead {
background: #E3ECFC
}
tr>td,
tr>th {
border-left: 1px solid #000;
border-right: 1px solid #000;
}
thead>tr:first-of-type {
border-top: 1px solid #000;
}
tfoot>tr:last-of-type {
border-bottom: 1px solid #000;
height:150px /* change here */
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">4</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tfoot>
</table>
</body>
</html>

Unable to get table header to be in a fixed position(sticky)

So i have a html table and I'm trying to make the table header act as sticky when scrolling since there will be a lot of rows, but it not working. I'm unable to get the header to stick or stay in a fixed position. My table has a fixed layout with a width of 250%.I am not really sure on how to make the table header sticky without ruining the current CSS ,any guidance will be helpful thank you.
HTML
<section class="justify-content-center table-section">
<table class="table" id="hwdashboard-table">
<thead>
<tr>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
<th>ABC<th>
</tr>
</thead>
<tbody
*ngFor="let x of (pagination ? (issues | FilterPipe: ticketNumber | paginate: {id: 'listing_pagination',itemsPerPage: itemsPerpage,currentPage: currentPage,totalItems: totalRec}) : (issues | FilterPipe: ticketNumber));let i=index;">
<tr data-toggle="collapse" [attr.data-target]="'#tablerow-'+i"
class="accordion-toggle">
<td>{{x.1}}</td>
<td>{{x.2}}</td>
<td>{{x.3}}</td>
<td>{{x.4}}</td>
<td>{{x.5}}</td>
<td>{{x.6}}</td>
<td>{{x.7}}</td>
<td>{{x.8}}</td>
<td>{{x.9}}</td>
</tr>
</tbody>
</table>
</section>
CSS
table {
border-collapse: collapse;
font-family: 'Roboto', sans-serif;
width: 250%;
table-layout: fixed;
box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.2), 1px 2px 4px 1px rgba(0, 0, 0, 0%);
}
th {
text-align: left;
font-weight: 800;
font-size: 12px;
color: black;
text-transform: uppercase;
background-color: #f0f0f0;
position: sticky;
}
td {
text-align: left;
vertical-align: middle;
font-size: 14px;
border-bottom: solid 1px #a6a6a6;
word-wrap: break-word;
font-family: 'Roboto', sans-serif;
text-transform: capitalize;
}
tr{
cursor: pointer;
}
.table-section {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
padding-bottom: 20px;
}
thead{
position: sticky;
}

That can happen for many reasons:
Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element.
Position sticky may not work correctly if any parent element has a set height.
Many browsers still do not support sticky positioning. Check out which browsers support position: sticky.
Check if an ancestor element has overflow set (e.g. overflow:hidden); try toggling it. You may have to go up the DOM tree higher than you expect.
This may affect your position:sticky on a descendant element.
Simple example
Shouldn't be hard to add your classes and layout.
body {
margin: 0;
padding: 2rem;
}
table {
text-align: left;
position: relative;
border-collapse: collapse;
}
th, td {
padding: 0.25rem;
}
tr.red th {
background: red;
color: white;
}
tr.green th {
background: green;
color: white;
}
tr.purple th {
background: purple;
color: white;
}
th {
background: white;
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
<table>
<thead>
<tr class="red">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem.</td>
<td>Ullam.</td>
<td>Vel.</td>
<td>At.</td>
<td>Quis.</td>
</tr>
<tr>
<td>Quas!</td>
<td>Velit.</td>
<td>Quisquam?</td>
<td>Rerum?</td>
<td>Iusto?</td>
</tr>
<tr>
<td>Voluptates!</td>
<td>Fugiat?</td>
<td>Alias.</td>
<td>Doloribus.</td>
<td>Veritatis.</td>
</tr>
<tr>
<td>Maiores.</td>
<td>Ab.</td>
<td>Accusantium.</td>
<td>Ullam!</td>
<td>Eveniet.</td>
</tr>
<tr>
<td>Hic.</td>
<td>Id!</td>
<td>Officiis.</td>
<td>Modi!</td>
<td>Obcaecati.</td>
</tr>
<tr>
<td>Soluta.</td>
<td>Ad!</td>
<td>Impedit.</td>
<td>Alias!</td>
<td>Ad.</td>
</tr>
<tr>
<td>Expedita.</td>
<td>Quo.</td>
<td>Exercitationem!</td>
<td>Optio?</td>
<td>Ipsum?</td>
</tr>
<tr>
<td>Commodi!</td>
<td>Rem.</td>
<td>Aspernatur.</td>
<td>Accusantium!</td>
<td>Maiores.</td>
</tr>
<tr>
<td>Omnis.</td>
<td>Cumque?</td>
<td>Eveniet!</td>
<td>Mollitia?</td>
<td>Vero.</td>
</tr>
<tr>
<td>Error!</td>
<td>Inventore.</td>
<td>Quasi!</td>
<td>Ducimus.</td>
<td>Repudiandae!</td>
</tr>
<tr>
<td>Dolores!</td>
<td>Necessitatibus.</td>
<td>Corrupti!</td>
<td>Eum.</td>
<td>Sunt!</td>
</tr>
<tr>
<td>Ea.</td>
<td>Culpa?</td>
<td>Quam?</td>
<td>Nemo!</td>
<td>Sit!</td>
</tr>
<tr>
<td>Veritatis!</td>
<td>Facilis.</td>
<td>Expedita?</td>
<td>Ipsam!</td>
<td>Omnis!</td>
</tr>
<tr>
<td>Vitae.</td>
<td>Cumque.</td>
<td>Repudiandae.</td>
<td>Ut?</td>
<td>Sed!</td>
</tr>
<tr>
<td>Accusantium.</td>
<td>Adipisci.</td>
<td>Sit.</td>
<td>Maxime.</td>
<td>Harum.</td>
</tr>
<tr class="green">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
<tr>
<td>Qui!</td>
<td>Accusamus?</td>
<td>Minima?</td>
<td>Dolorum.</td>
<td>Molestiae.</td>
</tr>
<tr>
<td>Vero!</td>
<td>Voluptatum?</td>
<td>Ea?</td>
<td>Odit!</td>
<td>A.</td>
</tr>
<tr>
<td>Debitis.</td>
<td>Veniam.</td>
<td>Fuga.</td>
<td>Alias!</td>
<td>Recusandae!</td>
</tr>
<tr>
<td>Aperiam!</td>
<td>Dolorum.</td>
<td>Enim.</td>
<td>Sapiente!</td>
<td>Suscipit?</td>
</tr>
<tr>
<td>Consequuntur.</td>
<td>Doloremque.</td>
<td>Illum!</td>
<td>Iste!</td>
<td>Sint!</td>
</tr>
<tr>
<td>Facilis.</td>
<td>Error.</td>
<td>Fugiat.</td>
<td>At.</td>
<td>Modi?</td>
</tr>
<tr>
<td>Voluptatibus!</td>
<td>Alias.</td>
<td>Eaque.</td>
<td>Cum.</td>
<td>Ducimus!</td>
</tr>
<tr>
<td>Nihil.</td>
<td>Enim.</td>
<td>Earum?</td>
<td>Nobis?</td>
<td>Eveniet.</td>
</tr>
<tr>
<td>Eum!</td>
<td>Id?</td>
<td>Molestiae.</td>
<td>Velit.</td>
<td>Minima.</td>
</tr>
<tr>
<td>Sapiente?</td>
<td>Neque.</td>
<td>Obcaecati!</td>
<td>Earum.</td>
<td>Esse.</td>
</tr>
<tr>
<td>Nam?</td>
<td>Ipsam!</td>
<td>Provident.</td>
<td>Ullam.</td>
<td>Quae?</td>
</tr>
<tr>
<td>Amet!</td>
<td>In.</td>
<td>Officia!</td>
<td>Natus?</td>
<td>Tempore?</td>
</tr>
<tr>
<td>Consequatur.</td>
<td>Hic.</td>
<td>Officia.</td>
<td>Itaque?</td>
<td>Quasi.</td>
</tr>
<tr>
<td>Enim.</td>
<td>Tenetur.</td>
<td>Asperiores?</td>
<td>Eos!</td>
<td>Libero.</td>
</tr>
<tr>
<td>Exercitationem.</td>
<td>Quidem!</td>
<td>Beatae?</td>
<td>Adipisci?</td>
<td>Accusamus.</td>
</tr>
<tr>
<td>Omnis.</td>
<td>Accusamus?</td>
<td>Eius!</td>
<td>Recusandae!</td>
<td>Dolor.</td>
</tr>
<tr>
<td>Magni.</td>
<td>Temporibus!</td>
<td>Odio!</td>
<td>Odit!</td>
<td>Voluptatum?</td>
</tr>
<tr>
<td>Eum.</td>
<td>Animi!</td>
<td>Labore.</td>
<td>Alias!</td>
<td>Fuga.</td>
</tr>
<tr>
<td>Quia!</td>
<td>Quis.</td>
<td>Neque?</td>
<td>Illo.</td>
<td>Ad.</td>
</tr>
<tr>
<td>Officiis.</td>
<td>Exercitationem!</td>
<td>Adipisci?</td>
<td>Officiis?</td>
<td>In?</td>
</tr>
<tr>
<td>Voluptates?</td>
<td>Voluptatum.</td>
<td>Nihil.</td>
<td>Totam?</td>
<td>Quisquam!</td>
</tr>
<tr>
<td>Soluta.</td>
<td>Tempore!</td>
<td>Cupiditate.</td>
<td>Beatae.</td>
<td>Perspiciatis.</td>
</tr>
<tr>
<td>Porro.</td>
<td>Officia?</td>
<td>Error.</td>
<td>Culpa?</td>
<td>Fugit.</td>
</tr>
<tr>
<td>Et?</td>
<td>Nemo.</td>
<td>Nisi?</td>
<td>Totam!</td>
<td>Voluptate.</td>
</tr>
<tr>
<td>Saepe?</td>
<td>Vero.</td>
<td>Amet?</td>
<td>Illo!</td>
<td>Laborum!</td>
</tr>
<tr class="purple">
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Color</th>
<th>URL</th>
</tr>
<tr>
<td>Atque!</td>
<td>Tenetur.</td>
<td>Optio.</td>
<td>Iure.</td>
<td>Porro.</td>
</tr>
<tr>
<td>Atque.</td>
<td>Alias.</td>
<td>Doloremque.</td>
<td>Velit.</td>
<td>Culpa.</td>
</tr>
<tr>
<td>Placeat?</td>
<td>Necessitatibus.</td>
<td>Voluptate!</td>
<td>Possimus.</td>
<td>Nam?</td>
</tr>
<tr>
<td>Illum!</td>
<td>Quae.</td>
<td>Expedita!</td>
<td>Omnis.</td>
<td>Nam.</td>
</tr>
<tr>
<td>Consequuntur!</td>
<td>Consectetur!</td>
<td>Provident!</td>
<td>Consequuntur!</td>
<td>Distinctio.</td>
</tr>
<tr>
<td>Aperiam!</td>
<td>Voluptatem.</td>
<td>Cupiditate!</td>
<td>Quae.</td>
<td>Praesentium.</td>
</tr>
<tr>
<td>Possimus?</td>
<td>Qui.</td>
<td>Consequuntur.</td>
<td>Deleniti.</td>
<td>Voluptas.</td>
</tr>
<tr>
<td>Hic?</td>
<td>Ab.</td>
<td>Asperiores?</td>
<td>Omnis.</td>
<td>Animi!</td>
</tr>
<tr>
<td>Cupiditate.</td>
<td>Velit.</td>
<td>Libero.</td>
<td>Iste.</td>
<td>Dicta?</td>
</tr>
<tr>
<td>Consequatur!</td>
<td>Nobis.</td>
<td>Aperiam!</td>
<td>Odio.</td>
<td>Nemo!</td>
</tr>
<tr>
<td>Dolorem.</td>
<td>Distinctio?</td>
<td>Provident?</td>
<td>Nisi!</td>
<td>Impedit?</td>
</tr>
<tr>
<td>Accusantium?</td>
<td>Ea.</td>
<td>Doloribus.</td>
<td>Nobis.</td>
<td>Maxime?</td>
</tr>
<tr>
<td>Molestiae.</td>
<td>Rem?</td>
<td>Enim!</td>
<td>Maxime?</td>
<td>Reiciendis!</td>
</tr>
<tr>
<td>Commodi.</td>
<td>At.</td>
<td>Earum?</td>
<td>Fugit.</td>
<td>Maxime?</td>
</tr>
<tr>
<td>Eligendi?</td>
<td>Quis.</td>
<td>Error?</td>
<td>Atque.</td>
<td>Perferendis.</td>
</tr>
<tr>
<td>Quidem.</td>
<td>Odit!</td>
<td>Tempore.</td>
<td>Voluptates.</td>
<td>Facere!</td>
</tr>
<tr>
<td>Repudiandae!</td>
<td>Accusamus?</td>
<td>Soluta.</td>
<td>Incidunt.</td>
<td>Aliquid?</td>
</tr>
<tr>
<td>Quisquam?</td>
<td>Eius.</td>
<td>Obcaecati?</td>
<td>Maxime.</td>
<td>Nihil.</td>
</tr>
<tr>
<td>Minus.</td>
<td>Magni?</td>
<td>Necessitatibus?</td>
<td>Asperiores.</td>
<td>Iure.</td>
</tr>
<tr>
<td>Ipsa!</td>
<td>Temporibus.</td>
<td>Non!</td>
<td>Dolore.</td>
<td>Veritatis.</td>
</tr>
<tr>
<td>Ea!</td>
<td>Officia?</td>
<td>Doloribus?</td>
<td>Deleniti?</td>
<td>Dolorem!</td>
</tr>
<tr>
<td>Sequi?</td>
<td>Molestias!</td>
<td>Nesciunt.</td>
<td>Qui.</td>
<td>Doloribus?</td>
</tr>
<tr>
<td>Id.</td>
<td>Enim?</td>
<td>Quam!</td>
<td>Sunt!</td>
<td>Consequuntur.</td>
</tr>
<tr>
<td>Reprehenderit?</td>
<td>Ut?</td>
<td>Veritatis!</td>
<td>Corporis!</td>
<td>Ipsa.</td>
</tr>
<tr>
<td>Blanditiis!</td>
<td>Veniam!</td>
<td>Tenetur.</td>
<td>Eos?</td>
<td>Repellat!</td>
</tr>
<tr>
<td>Enim?</td>
<td>Atque!</td>
<td>Aspernatur?</td>
<td>Fugit.</td>
<td>Voluptatibus!</td>
</tr>
<tr>
<td>Nihil.</td>
<td>Distinctio!</td>
<td>Aut!</td>
<td>Rerum!</td>
<td>Dolorem?</td>
</tr>
<tr>
<td>Inventore!</td>
<td>Hic.</td>
<td>Explicabo.</td>
<td>Sit.</td>
<td>A.</td>
</tr>
<tr>
<td>Inventore.</td>
<td>A.</td>
<td>Nam.</td>
<td>Beatae.</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Eligendi.</td>
<td>Illum.</td>
<td>Enim?</td>
<td>Dignissimos!</td>
<td>Ducimus?</td>
</tr>
<tr>
<td>Eligendi!</td>
<td>Fugiat?</td>
<td>Deleniti!</td>
<td>Rerum?</td>
<td>Delectus?</td>
</tr>
<tr>
<td>Sit.</td>
<td>Nam.</td>
<td>Eveniet?</td>
<td>Veritatis.</td>
<td>Adipisci!</td>
</tr>
<tr>
<td>Nostrum?</td>
<td>Totam?</td>
<td>Voluptates!</td>
<td>Ab!</td>
<td>Consequatur.</td>
</tr>
<tr>
<td>Error!</td>
<td>Dicta?</td>
<td>Voluptatum?</td>
<td>Corporis!</td>
<td>Ea.</td>
</tr>
<tr>
<td>Vel.</td>
<td>Asperiores.</td>
<td>Facere.</td>
<td>Quae.</td>
<td>Fugiat.</td>
</tr>
<tr>
<td>Libero?</td>
<td>Molestias.</td>
<td>Praesentium!</td>
<td>Accusantium!</td>
<td>Tenetur.</td>
</tr>
<tr>
<td>Eveniet.</td>
<td>Quam.</td>
<td>Quibusdam.</td>
<td>Eaque?</td>
<td>Dolore!</td>
</tr>
<tr>
<td>Asperiores.</td>
<td>Impedit.</td>
<td>Ullam?</td>
<td>Quod.</td>
<td>Placeat.</td>
</tr>
<tr>
<td>In?</td>
<td>Aliquid.</td>
<td>Voluptatum!</td>
<td>Omnis?</td>
<td>Magni.</td>
</tr>
<tr>
<td>Autem.</td>
<td>Earum!</td>
<td>Debitis!</td>
<td>Eius.</td>
<td>Incidunt.</td>
</tr>
<tr>
<td>Blanditiis?</td>
<td>Impedit.</td>
<td>Libero?</td>
<td>Reiciendis!</td>
<td>Tempore.</td>
</tr>
<tr>
<td>Quasi.</td>
<td>Reiciendis.</td>
<td>Aut?</td>
<td>Architecto?</td>
<td>Vero!</td>
</tr>
<tr>
<td>Fuga!</td>
<td>Illum!</td>
<td>Tenetur!</td>
<td>Vitae.</td>
<td>Natus.</td>
</tr>
<tr>
<td>Dolorem?</td>
<td>Eaque!</td>
<td>Vero?</td>
<td>Quibusdam.</td>
<td>Deleniti?</td>
</tr>
<tr>
<td>Minus.</td>
<td>Accusantium?</td>
<td>Ab.</td>
<td>Cupiditate.</td>
<td>Atque?</td>
</tr>
<tr>
<td>Hic.</td>
<td>Eligendi.</td>
<td>Sit?</td>
<td>Nihil.</td>
<td>Dolor.</td>
</tr>
<tr>
<td>Quidem.</td>
<td>In?</td>
<td>Nesciunt?</td>
<td>Adipisci.</td>
<td>Neque.</td>
</tr>
<tr>
<td>Eos.</td>
<td>Incidunt!</td>
<td>Quis?</td>
<td>Quod?</td>
<td>Vitae!</td>
</tr>
<tr>
<td>Ullam!</td>
<td>Facilis.</td>
<td>Tempora!</td>
<td>Accusantium.</td>
<td>Consequuntur?</td>
</tr>
<tr>
<td>Numquam?</td>
<td>At.</td>
<td>Incidunt.</td>
<td>Tenetur?</td>
<td>Voluptatem.</td>
</tr>
<tr>
<td>Iusto?</td>
<td>Inventore.</td>
<td>Molestias.</td>
<td>Accusantium.</td>
<td>Sunt.</td>
</tr>
<tr>
<td>Repellendus!</td>
<td>Ex.</td>
<td>Magnam.</td>
<td>Odit!</td>
<td>Iste?</td>
</tr>
<tr>
<td>Id!</td>
<td>Reiciendis?</td>
<td>Rem.</td>
<td>Quae!</td>
<td>Laborum?</td>
</tr>
<tr>
<td>Exercitationem?</td>
<td>Maiores.</td>
<td>Minima.</td>
<td>Nemo!</td>
<td>Sequi.</td>
</tr>
<tr>
<td>Qui.</td>
<td>Impedit?</td>
<td>Reprehenderit.</td>
<td>Distinctio.</td>
<td>Natus?</td>
</tr>
<tr>
<td>Suscipit!</td>
<td>Tenetur.</td>
<td>Cumque!</td>
<td>Molestiae.</td>
<td>Fugiat?</td>
</tr>
<tr>
<td>Sunt?</td>
<td>Quis?</td>
<td>Officia.</td>
<td>Incidunt.</td>
<td>Voluptate.</td>
</tr>
<tr>
<td>Possimus.</td>
<td>Mollitia!</td>
<td>Eveniet!</td>
<td>Temporibus.</td>
<td>Mollitia!</td>
</tr>
<tr>
<td>Incidunt.</td>
<td>Fugiat.</td>
<td>Error.</td>
<td>Odit.</td>
<td>Cumque?</td>
</tr>
<tr>
<td>Maxime?</td>
<td>Qui!</td>
<td>Sapiente!</td>
<td>Natus.</td>
<td>Soluta?</td>
</tr>
</tbody>
</table>

You can set position="sticky" only on th elements (not thead)
th {
/* ... */
position: sticky;
top: 0; /* Don't forget this, required for the stickiness */
}
Remove overflow setting from .table-section:
.table-section {
width: 100%;
/*overflow-x: scroll;*/
/*overflow-y: hidden;*/
padding-bottom: 20px;
}

Select all columns of first table of a form

I am trying to select all columns of the first table in a form.
.myform table:first td { color: red }
Code Sample: https://jsfiddle.net/fqsLaxzL/1/

I edited your fiddle : https://jsfiddle.net/fqsLaxzL/2/
table {
border: solid 1px black;
}
.myform table:FIRST-CHILD td { color: red }
<form class="myform">
<table>
<tr>
<td>this</td>
<td>this</td>
<td>
<table>
<tr>
<td>this one too</td>
<td>this one too</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td>...</td>
</tr>
</table>
<table>
<tr>
<td>...</td>
</tr>
</table>
</form>

Aligning html tables to get vertical line same for both

Hello I have these following tables for which I want same vertical line. please check my code here link I have two vertical tables, I want same vertical line of alignment for both the tables so that The line between two tables appears same though the tables are different.
Here is what I want
Here is what I am getting if I add text to th .
please tell me how can I make it better.
table,
th,
td {
border: 1px solid black;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td>$100</td>
</tr>
<tr>
<th>February</th>
<td>$80</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td>$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td>$80</td>
</tr>
</table>

You could simply specify the width for the th and td elements, say 50%.
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
table th {
text-align: left;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>

what I did is put the two tables in another table which has 2 rows to perfectly match vertical alignment
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
<table>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
</table>
I assume this is what you expect!

How to make a line in a table with CSS

I'd tried to make a line as an image below which runs through the table but it didn't work.
I would like to
make a line like the image.
set a bullet for each <td> in the 2nd table
HTML:
<table>
<tr>
<table class="a">
<tr>
<td style="width: 300px">Shuttle Bus Schedule | Make an appointment</td>
<td style="width: 220px">My Request</td>
</tr>
</table>
</tr>
<tr>
<table>
<tr>
<td style="width: 300px">Need Approval by Manager</td>
<td style="width: 220px">Need Approval by Coordinator</td>
</tr>
<tr>
<td>Approved by Manager</td>
<td>Approved by Coordinator</td>
</tr>
<tr>
<td>Rejected by Manager</td>
<td>Rejected by Coordinator</td>
</tr>
</table>
</tr>
</table>
CSS:
.a {
border-bottom: 1px solid #c4c4c4;
}

Structure your table properly with table headings (<th>) instead of nested tables:
<table>
<tr>
<th style="width: 300px">Shuttle Bus Schedule | Make an appointment</th>
<th style="width: 220px">My Request</th>
</tr>
<tr>
<td>Need Approval by Manager</td>
<td>Need Approval by Coordinator</td>
</tr>
<tr>
<td>Approved by Manager</td>
<td>Approved by Coordinator</td>
</tr>
<tr>
<td>Rejected by Manager</td>
<td>Rejected by Coordinator</td>
</tr>
</table>
CSS:
th {border-bottom:1px solid #c4c4c4};
td:before {content:"\2022";}
You can see this here on jsfiddle.

The table structure is not really in good format. However to keep the same table structure you can achieve the results. See the DEMO.
Here is the CSS need to used.
.a {
border-top: 1px solid transparent;
}
table{border: 1px solid transparent;
border-collapse:collapse;}
table td{ padding:5px; margin:5px;}
table+table td:last-child{border-left:
1px solid #c4c4c4;}
table+table td:last-child:before{content:"\2022"}
table+table{border-top: 1px solid #c4c4c4; }
table.a td:last-child:before{content:" "}

Resources