Aligning html tables to get vertical line same for both - css

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!

Related

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;
}

Columns and rows in css

I would like to convert a column to a row, and display it with the other rows on 1 line. I don't know if it is possible, but if it is, please help! I want to convert table column into table row only using CSS. The table is good, it works fine, but i want to make it responsive, everything on a vertical line, i just get this as result, a Γ shape.
this is what i got:
#media screen and (max-width:650px)
{
table, thead, tbody, tr, th, td{
display:block;
}
thead tr {
display:none;
}
tbody tr{
display:table-row;
width:auto;
}
}
/This is what i goit in HTML/
<table width="1400px">
<thead>
<tr>
<th>a1</th>
<th>a2</th>
<th>a3</th>
<th>a4</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td rowspan="13">b2</td>
<td rowspan="13">b3</td>
<td rowspan="13">b4</td>
</tr>
<tr>
<td>c1</td>
</tr>
<tr>
<td>d1</td>
</tr>
<tr>
<td>e1</td>
</tr>
<tr>
<td>f1</td>
</tr>
<tr>
<td>g1</td>
</tr>
<tr>
<td>h1</td>
</tr>
<tr>
<td>i1</td>
</tr>
<tr>
<td>j1</td>
</tr>
<tr>
<td>k1</td>
</tr>
<tr>
<td>l1</td>
</tr>
<tr>
<td>m1</td>
</tr>
<tr>
<td>n1</td>
</tr>
</tbody>
</table>

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>

Vertical align for tbody

I have a table separated by thead and tbody. The text I have in tbody is vertically centered. I want to have it displayed at the top of the tbody.
<thead>
<tr>
<td>.... </td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">
<h1>Hi</h1>
<p> Hello!
</p>
</td>
</tr>
</tbody>
I tried doing something like:
tbody { vertical-align:top;}
But that doesnt work
The problem is not with valign as it works correctly, the problem is the element h1 has a margin by default, you should set it to 0:
h1 {
margin: 0;
}
<table border="1">
<thead>
<tr>
<td>.... </td>
<td>.... </td>
</tr>
</thead>
<tbody valign="top">
<tr>
<td>
<h1>Hi</h1>
<p> Hello!</p>
</td>
<td>
A
</td>
</tr>
</tbody>
</table>

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