How to move backgroung with repeating-linear-gradient() - css

It's a bit complicated for me to explain this by words, so please look at
table {
border-collapse: collapse;
}
table>tbody td {
border: solid 1px #00000062;
width: 47px;
height: 34px;
text-align: center;
}
#t1 td.locked {
background: repeating-linear-gradient(-45deg, transparent, transparent 7px, #00000035 7px, #00000035 14px);
}
/**
* I have no success with this
*/
#t1 td.locked:nth-child(odd) {
background-position-y: 0px;
}
#t2 td {
width: 45px;
height: 25px;
}
#t2 td.locked {
background: repeating-linear-gradient(-49deg, transparent, transparent 9px, #00000035 9px, #00000035 18px);
}
<table id="t1">
<tbody>
<tr>
<td>1.1</td>
<td class="locked">1.2</td>
<td class="locked">1.3</td>
<td class="locked">1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td class="locked">2.2</td>
<td class="locked">2.3</td>
<td class="locked">2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td class="locked">3.2</td>
<td class="locked">3.3</td>
<td class="locked">3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td class="locked">4.2</td>
<td class="locked">4.3</td>
<td class="locked">4.4</td>
<td>4.5</td>
</tr>
<tr>
<td>5.1</td>
<td class="locked">5.2</td>
<td class="locked">5.3</td>
<td class="locked">5.4</td>
<td>5.5</td>
</tr>
</tbody>
</table>
<hr>
<table id="t2">
<tbody>
<tr>
<td>1.1</td>
<td class="locked">1.2</td>
<td class="locked">1.3</td>
<td class="locked">1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td class="locked">2.2</td>
<td class="locked">2.3</td>
<td class="locked">2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td class="locked">3.2</td>
<td class="locked">3.3</td>
<td class="locked">3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td class="locked">4.2</td>
<td class="locked">4.3</td>
<td class="locked">4.4</td>
<td>4.5</td>
</tr>
<tr>
<td>5.1</td>
<td class="locked">5.2</td>
<td class="locked">5.3</td>
<td class="locked">5.4</td>
<td>5.5</td>
</tr>
</tbody>
</table>
There are two tables with some cells having striped background.
Striped cells in #t2 are nearly what I want: stripes in neighboring cells almost coincide and look like that they are drawn across the whole column (or several columns).
But I don't like how I've achieved this: by adjusting cells size and stripes width and angle.
Is it possible to achieve similar look for #t1 table by somehow "move" striped background? And don't change stripes width and angle and cells size also?


You may apply the gradient to the whole table instead and apply white background to the cell where you don't need the gradient.
table {
border-collapse: collapse;
background: repeating-linear-gradient(-45deg, transparent, transparent 7px, #00000035 7px, #00000035 14px);
}
table>tbody td {
border: solid 1px #00000062;
width: 47px;
height: 34px;
text-align: center;
}
td:not(.locked) {
background:#fff;
}
#t2 td {
width: 45px;
height: 25px;
}
<table id="t1">
<tbody>
<tr>
<td>1.1</td>
<td class="locked">1.2</td>
<td class="locked">1.3</td>
<td class="locked">1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td class="locked">2.2</td>
<td class="locked">2.3</td>
<td class="locked">2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td class="locked">3.2</td>
<td class="locked">3.3</td>
<td class="locked">3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td class="locked">4.2</td>
<td class="locked">4.3</td>
<td class="locked">4.4</td>
<td>4.5</td>
</tr>
<tr>
<td>5.1</td>
<td class="locked">5.2</td>
<td class="locked">5.3</td>
<td class="locked">5.4</td>
<td>5.5</td>
</tr>
</tbody>
</table>
<hr>
<table id="t2">
<tbody>
<tr>
<td>1.1</td>
<td class="locked">1.2</td>
<td class="locked">1.3</td>
<td class="locked">1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td class="locked">2.2</td>
<td class="locked">2.3</td>
<td class="locked">2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td class="locked">3.2</td>
<td class="locked">3.3</td>
<td class="locked">3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td class="locked">4.2</td>
<td class="locked">4.3</td>
<td class="locked">4.4</td>
<td>4.5</td>
</tr>
<tr>
<td>5.1</td>
<td class="locked">5.2</td>
<td class="locked">5.3</td>
<td class="locked">5.4</td>
<td>5.5</td>
</tr>
</tbody>
</table>


You need to set a common point of reference for the background.
The style needed for this is
background-attachment: fixed
table {
border-collapse: collapse;
}
table>tbody td {
border: solid 1px #00000062;
width: 47px;
height: 34px;
text-align: center;
}
#t1 td.locked {
background: repeating-linear-gradient(-45deg, transparent, transparent 7px, #00000035 7px, #00000035 14px);
background-attachment: fixed; /* added */
}
<table id="t1">
<tbody>
<tr>
<td>1.1</td>
<td class="locked">1.2</td>
<td class="locked">1.3</td>
<td class="locked">1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td class="locked">2.2</td>
<td class="locked">2.3</td>
<td class="locked">2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td class="locked">3.2</td>
<td class="locked">3.3</td>
<td class="locked">3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td class="locked">4.2</td>
<td class="locked">4.3</td>
<td class="locked">4.4</td>
<td>4.5</td>
</tr>
<tr>
<td>5.1</td>
<td class="locked">5.2</td>
<td class="locked">5.3</td>
<td class="locked">5.4</td>
<td>5.5</td>
</tr>
</tbody>
</table>
<hr>

Related

How I can fixed the text in elementor pro wordpress to left

How I can change this : (photo)
To this: (photo)
(!) Dosen't work with: text-align, text-justify, etc.

I believe that the best way to achieve that by creating a custom html table
table{
border: 1px solid #ddd;
}
.second{
width: 35%;
border-left:1px solid #ddd;
}
<table style="width: 100%;" border="0">
<tbody>
<tr>
<td>Item 1</td>
<td class="second">44$</td>
</tr>
<tr>
<td>Item 2</td>
<td class="second">$55</td>
</tr>
<tr>
<td >Item 3</td>
<td class="second">$66</td>
</tr>
<tr>
<td>Item 4</td>
<td class="second">$88</td>
</tr>
<tr>
<td>Item 5</td>
<td class="second">$99</td>
</tr>
</tbody>
</table>
<!-- DivTable.com -->

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

Reposonsive table with headers and Y scroll [duplicate]

This question already has answers here:
How to set tbody height with overflow scroll
(16 answers)
Closed 5 years ago.
I'm stuck on a table design.
My headers aren't lining up with my body tds, and my scroll is throwing off alignment.
I imagine I could just use a
table-header-group
However, that loses my scroll.
If I put it an a div, then I lose my header to the scroll.
Attached is a fiddle for viewing.
Anyways, How can I:
1. Align my head with the body
2. use scroll in the Y
3. Fit the data using as a responsive table
First, Fiddle with weird CSS "display:" usage
Fiddle
Updated Fiddle height of 80px overridden:
https://jsfiddle.net/t1zss67n/4/

Your display reset could be on every tr, then adding a padding to thead of equal average width of the scrollbar should do. https://jsfiddle.net/t1zss67n/5/
actually very similar to How to set tbody height with overflow scroll
thead {
display:block;
padding-right:17px ;
}
thead tr, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
.thead {
background-clip: padding-box;
background-color: #f5f5f5;
background-image: linear-gradient(to bottom,#fafafa 0,#ededed 100%);
background-repeat: repeat-x;
font-weight: 700;
font-size: 12px;
}
table ,tr td{
border:1px solid red
}
tbody {
max-height: 800px;
}
tbody {
display:block;
overflow-y:scroll;
}
thead {
display:block;
padding-right:17px ;
}
thead tr, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
tr td:first-child {
width: 60px;
}
.table-hover>tbody>tr:hover> td{
background-color: #ffa;
border-bottom-color: #ffa;
}
.table-hover>tbody>tr>td:hover:not(:first-child) {
background-color: #fff;
border: 1px solid #aaa;
}
td {
text-overflow: ellipsis;
width: 10px;
white-space: nowrap;
overflow: hidden;
padding: 2px;
}
<table class="table table-hover table-responsive">
<thead>
<tr class="thead">
<td>Name</td>
<td>Nov16</td>
<td>Dec16</td>
<td>Jan17</td>
<td>Feb17</td>
<td>Mar17</td>
<td>Apr17</td>
<td>May17</td>
<td>Jun17</td>
<td>Jul17</td>
<td>Aug17</td>
<td>Sept17</td>
<td>Oct17</td>
<td>RTM</td>
<td >2012</td>
<td>2013</td>
<td>2014</td>
<td>2015</td>
<td>2016</td>
<td>YTD</td>
</tr>
</thead>
<tbody>
<tr role="row">
<td class="text-left">Gabe Maloney</td>
<td class="text-right">253</td>
<td class="text-right">229</td>
<td class="text-right">78</td>
<td class="text-right">36</td>
<td class="text-right">236</td>
<td class="text-right">107</td>
<td class="text-right">106</td>
<td class="text-right">246</td>
<td class="text-right">66</td>
<td class="text-right">71</td>
<td class="text-right">172</td>
<td class="text-right">235</td>
<td class="text-right ttm">1728</td>
<td class="text-right">1943</td>
<td class="text-right">1275</td>
<td class="text-right">1810</td>
<td class="text-right">225</td>
<td class="text-right">985</td>
<td class="text-right ytd">896</td>
</tr>
<tr role="row">
<td class="text-left">Adrien Johnson</td>
<td class="text-right">274</td>
<td class="text-right">291</td>
<td class="text-right">195</td>
<td class="text-right">133</td>
<td class="text-right">171</td>
<td class="text-right">19</td>
<td class="text-right">79</td>
<td class="text-right">31</td>
<td class="text-right">262</td>
<td class="text-right">208</td>
<td class="text-right">58</td>
<td class="text-right">117</td>
<td class="text-right ttm">1819</td>
<td class="text-right">1799</td>
<td class="text-right">1010</td>
<td class="text-right">336</td>
<td class="text-right">417</td>
<td class="text-right">1803</td>
<td class="text-right ytd">755</td>
</tr>
<tr role="row">
<td class="text-left">Axel Johnson</td>
<td class="text-right">275</td>
<td class="text-right">294</td>
<td class="text-right">232</td>
<td class="text-right">80</td>
<td class="text-right">128</td>
<td class="text-right">143</td>
<td class="text-right">255</td>
<td class="text-right">235</td>
<td class="text-right">186</td>
<td class="text-right">48</td>
<td class="text-right">97</td>
<td class="text-right">199</td>
<td class="text-right ttm">2029</td>
<td class="text-right">1031</td>
<td class="text-right">787</td>
<td class="text-right">333</td>
<td class="text-right">1259</td>
<td class="text-right">1261</td>
<td class="text-right ytd">1020</td>
</tr>
<tr role="row">
<td class="text-left">George Johnson</td>
<td class="text-right">39</td>
<td class="text-right">102</td>
<td class="text-right">127</td>
<td class="text-right">171</td>
<td class="text-right">128</td>
<td class="text-right">283</td>
<td class="text-right">201</td>
<td class="text-right">231</td>
<td class="text-right">34</td>
<td class="text-right">150</td>
<td class="text-right">76</td>
<td class="text-right">80</td>
<td class="text-right ttm">1339</td>
<td class="text-right">907</td>
<td class="text-right">1221</td>
<td class="text-right">1876</td>
<td class="text-right">999</td>
<td class="text-right">2012</td>
<td class="text-right ytd">772</td>
</tr>
<tr role="row">
<td class="text-left">Reek Jones</td>
<td class="text-right">224</td>
<td class="text-right">109</td>
<td class="text-right">162</td>
<td class="text-right">192</td>
<td class="text-right">226</td>
<td class="text-right">270</td>
<td class="text-right">257</td>
<td class="text-right">65</td>
<td class="text-right">137</td>
<td class="text-right">172</td>
<td class="text-right">168</td>
<td class="text-right">173</td>
<td class="text-right ttm">1885</td>
<td class="text-right">1086</td>
<td class="text-right">649</td>
<td class="text-right">447</td>
<td class="text-right">480</td>
<td class="text-right">825</td>
<td class="text-right ytd">972</td>
</tr>
<tr role="row">
<td class="text-left">JP Lefkort</td>
<td class="text-right">76</td>
<td class="text-right">82</td>
<td class="text-right">18</td>
<td class="text-right">54</td>
<td class="text-right">27</td>
<td class="text-right">240</td>
<td class="text-right">50</td>
<td class="text-right">248</td>
<td class="text-right">197</td>
<td class="text-right">294</td>
<td class="text-right">20</td>
<td class="text-right">262</td>
<td class="text-right ttm">1328</td>
<td class="text-right">2007</td>
<td class="text-right">143</td>
<td class="text-right">1126</td>
<td class="text-right">803</td>
<td class="text-right">1771</td>
<td class="text-right ytd">1071</td>
</tr>
<tr role="row">
<td class="text-left">Susan Segal</td>
<td class="text-right">101</td>
<td class="text-right">236</td>
<td class="text-right">95</td>
<td class="text-right">204</td>
<td class="text-right">213</td>
<td class="text-right">197</td>
<td class="text-right">292</td>
<td class="text-right">49</td>
<td class="text-right">44</td>
<td class="text-right">75</td>
<td class="text-right">137</td>
<td class="text-right">49</td>
<td class="text-right ttm">1495</td>
<td class="text-right">1215</td>
<td class="text-right">1667</td>
<td class="text-right">546</td>
<td class="text-right">753</td>
<td class="text-right">849</td>
<td class="text-right ytd">646</td>
</tr>
<tr role="row">
<td class="text-left">Antonio Townsend</td>
<td class="text-right">244</td>
<td class="text-right">198</td>
<td class="text-right">98</td>
<td class="text-right">262</td>
<td class="text-right">281</td>
<td class="text-right">141</td>
<td class="text-right">219</td>
<td class="text-right">273</td>
<td class="text-right">123</td>
<td class="text-right">68</td>
<td class="text-right">15</td>
<td class="text-right">114</td>
<td class="text-right ttm">1895</td>
<td class="text-right">143</td>
<td class="text-right">1612</td>
<td class="text-right">1564</td>
<td class="text-right">148</td>
<td class="text-right">1042</td>
<td class="text-right ytd">812</td>
</tr>
</tbody>
</table>

Answered: Do not scroll table headings when scrolling down a html table
See specifically:
http://www.imaputz.com/cssStuff/bigFourVersion.html
This fiddle may provide the best solution though
jsfiddle.net/deborah/Msvvr/

how to create table grid view fix header with long title name using only CSS?

I am trying to make table grid view using CSS only. But when I make long title name design gets distorted.
Here's the Code:
.table {
table-layout:fixed;
width:500px;
border-collapse:collapse;
}
.header th {
font-family:Calibri;
font-size:small;
font-weight:lighter;
border-left:1px solid #000;
background:#d0d0d0;
}
.body_panel {
display:inline-block;
width:520px;
height:300px;
overflow-y:scroll;
}
.body tr {
border-bottom:1px solid #d0d0d0;
}
.body td {
border-left:1px solid #d0d0d0;
padding-left:3px;
font-family:Calibri;
font-size:small;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
<table class="table">
<thead class="header">
<tr>
<th style="width:20%;">vijay solanki vijayksolanki</th>
<th style="width:30%;">vijay solanki vijaysolanki</th>
<th style="width:50%;">vijay solanki vijaysolanki</th>
</tr>
</thead>
</table>
<div class="body_panel">
<table class="table">
<tbody class="body">
<tr>
<td style="width:20%;">asbkj k kajsb ksb kabkb</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
<tr>
<td style="width:20%;">2</td>
<td style="width:30%;">2</td>
<td style="width:50%;">3</td>
</tr>
</tbody>
</table>
Please help me into this.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Cruise Ships, their Tonnage and Status</title>
<style type="text/css">
* { padding: 0; margin: 0; }
table.cruises {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
cellspacing: 0;
border-collapse: collapse;
width: 535px;
}
table.cruises td {
border-left: 1px solid #999;
border-top: 1px solid #999;
padding: 2px 4px;
}
table.cruises tr:first-child td {
border-top: none;
}
table.cruises th {
width:50px!important;
border-left: 1px solid #999;
padding: 2px 4px;
background: #6b6164;
color: white;
font-variant: small-caps;
}
table.cruises td { background: #eee; overflow: hidden; }
div.scrollableContainer {
position: relative;
width: 592px;
padding-top: 2em;
margin: 40px;
border: 1px solid #999;
background: #6b6164;
}
div.scrollingArea {
height: 240px;
overflow: auto;
}
table.scrollable thead tr {
left: -1px; top: 0;
position: absolute;
}
table.cruises .name div { width: 108px; }
table.cruises .operator div { width: 126px; }
table.cruises .began div { width: 76px; text-align:center; }
table.cruises .tonnage div { width: 60px; text-align:center; }
table.cruises .status div { width: 160px; }
table.cruises td.operator { background: #ebcb4d; }
table.cruises td.tonnage { background: white; }
table.cruises td.name { background: #C7E0C1; }
table.cruises td.began { background: #B7C3E8; }
</style>
</head>
<body>
<div class="scrollableContainer">
<div class="scrollingArea">
<table class="cruises scrollable">
<thead>
<tr>
<th class="name"><div>Name defffdbre fgrgfergfer fgrgfergfer</div></th>
<th class="operator"><div>Operator</div></th>
<th class="began"><div>Name defffdbre fgrgfergfer fgrgfergfer</div></th>
<th class="tonnage"><div>Tonnage</div></th>
<th class="status"><div>Status</div></th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><div>Seabourne Sun</div></td>
<td class="operator"><div>Seabourn Cruise Line</div></td>
<td class="began"><div>1988</div></td>
<td class="tonnage"><div></div></td>
<td class="status"><div >Ended service in 2002, currently operating as Prinsendam</div></td>
</tr>
<tr>
<td class="name"><div>Adventures of the Seas</div></td>
<td class="operator"><div>Royal Caribbean International</div></td>
<td class="began"><div>2001</div></td>
<td class="tonnage"><div>138,000</div></td>
<td class="status"><div >Operating</div></td>
</tr>
<tr>
<td class="name"><div>Oceanic Independence</div></td>
<td class="operator"><div>American Hawaiian Cruises / American Global Line</div></td>
<td class="began"><div>1974</div></td>
<td class="tonnage"><div>23,719</div></td>
<td class="status"><div >Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008 but remains in mothballs</div></td>
</tr>
<tr>
<td class="name"><div>Cunard Ambassador</div></td>
<td class="operator"><div>Cunard Line</div></td>
<td class="began"><div>1972</div></td>
<td class="tonnage"><div>14,160</div></td>
<td class="status"><div >Burnt 1974, rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</div></td>
</tr>
<tr>
<td class="name"><div>Aegean Beauty</div></td>
<td class="operator"><div>Voyages to Antiquity</div></td>
<td class="began"><div>1973</div></td>
<td class="tonnage"><div>11,563</div></td>
<td class="status"><div >Formerly Aegean Dolphin and Aegean I. Operating</div></td>
</tr>
<tr>
<td class="name"><div>Serenade of the Seas</div></td>
<td class="operator"><div>Royal Caribbean International</div></td>
<td class="began"><div>2003</div></td>
<td class="tonnage"><div>90,090</div></td>
<td class="status"><div >Operating</div></td>
</tr>
<tr>
<td class="name"><div>Queen Elizabeth 2</div></td>
<td class="operator"><div>Cunard Line</div></td>
<td class="began"><div>1969</div></td>
<td class="tonnage"><div>70,327</div></td>
<td class="status"><div >Left fleet in November 2008</div></td>
</tr>
<tr>
<td class="name"><div>Queen Elizabeth</div></td>
<td class="operator"><div>Cunard Line</div></td>
<td class="began"><div>2010</div></td>
<td class="tonnage"><div>92,000</div></td>
<td class="status"><div >Operating</div></td>
</tr>
<tr>
<td class="name"><div>Regent Sea</div></td>
<td class="operator"><div>Regency Cruises</div></td>
<td class="began"><div>1957</div></td>
<td class="tonnage"><div></div></td>
<td class="status"><div >Began operation in 1957 as the Gripsholm (II) for Swedish America Line. Ended operation when Regency went bankrupt in 1995. Was to be converted to a casino ship, but later marked for scrap. Prior to scrapping, was looted by pirates, then sank in heavy seas in 2001.</div></td>
</tr>
<tr>
<td class="name"><div>Allure of the Seas</div></td>
<td class="operator"><div>Royal Caribbean International</div></td>
<td class="began"><div>2010</div></td>
<td class="tonnage"><div>225,000</div></td>
<td class="status"><div >Starts service in December 2010</div></td>
</tr>
<tr>
<td class="name"><div>Amadea</div></td>
<td class="operator"><div>Phoenix Reisen</div></td>
<td class="began"><div>2006</div></td>
<td class="tonnage"><div>28,717</div></td>
<td class="status"><div >Operating. Ex-Asuka</div></td>
</tr>
<tr>
<td class="name"><div>Amant</div></td>
<td class="operator"><div>PhoenixVoyages (Vietnam)</div></td>
<td class="began"><div>2010</div></td>
<td class="tonnage"><div></div></td>
<td class="status"><div >Built in 2010 by a local Vietnamese shipyard (Vuotsong), L'Amant operates on the Mekong River in Vietnam, and is without any doubt the most well constructed vessel sailing in Vietnam.</div></td>
</tr>
<tr>
<td class="name"><div>Oasis of the Seas</div></td>
<td class="operator"><div>Royal Caribbean Cruise Line</div></td>
<td class="began"><div>2009</div></td>
<td class="tonnage"><div>225,282</div></td>
<td class="status"><div >Operating</div></td>
</tr>
<tr>
<td class="name"><div>Andes</div></td>
<td class="operator"><div>Royal Mail Lines</div></td>
<td class="began"><div>1959</div></td>
<td class="tonnage"><div>27,000</div></td>
<td class="status"><div >Was liner, became cruise ship in 1959.</div></td>
</tr>
<tr>
<td class="name"><div>Anna Nery</div></td>
<td class="operator"><div>Companhia de Navegacao Costeirab</div></td>
<td class="began"><div>1962</div></td>
<td class="tonnage"><div></div></td>
<td class="status"><div >Ended service in 1978. Currently operating as Salamis Glory</div></td>
</tr>
<tr>
<td class="name"><div>National Geographic Endeavour</div></td>
<td class="operator"><div>Lindblad Expeditions</div></td>
<td class="began"><div>1996</div></td>
<td class="tonnage"><div></div></td>
<td class="status"><div >Operating, also known as Endeavour</div></td>
</tr>
<tr>
<td class="name"><div>Liberty of the Seas</div></td>
<td class="operator"><div>Royal Caribbean International</div></td>
<td class="began"><div>2007</div></td>
<td class="tonnage"><div>154,407</div></td>
<td class="status"><div >Operating</div></td>
</tr>
<tr>
<td class="name"><div>Norwegian Epic</div></td>
<td class="operator"><div>Norwegian Cruise Line</div></td>
<td class="began"><div>2010</div></td>
<td class="tonnage"><div>153,000</div></td>
<td class="status"><div >Operating</div></td>
</tr>
<tr>
<td class="name"><div>Independence of the Seas</div></td>
<td class="operator"><div>Royal Caribbean International</div></td>
<td class="began"><div>2008</div></td>
<td class="tonnage"><div>154,407</div></td>
<td class="status"><div >Operating</div></td>
</tr>
<tr>
<td class="name"><div>Navigator of the Seas</div></td>
<td class="operator"><div>Royal Caribbean International</div></td>
<td class="began"><div>2002</div></td>
<td class="tonnage"><div> 138,000</div></td>
<td class="status"><div >Operating</div></td>
</tr>
<tr>
<td class="name"><div>Caribbean Princess</div></td>
<td class="operator"><div>Princess Cruises</div></td>
<td class="began"><div>2004</div></td>
<td class="tonnage"><div>112,894</div></td>
<td class="status"><div >Operating</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

Table columns not equal

I have the following table. I use colspan="4" for 2 td - but they are not equal. First column is greater than second. What is this due to?
<table border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="8" style="height:10px;"> </td></tr>
<tr><td colspan="8" style="height:10px;"> </td></tr>
<tr>
<td style="position: relative; font-size: 14px;" colspan="8">
text
</td>
</tr>
<tr><td colspan="8"> </td></tr>
<tr>
<td colspan="4">
To:
</td>
<td colspan="4">
From:
</td>
</tr>
<tr>
<td colspan="4">
text<br>
text<br>
text<br>
text
</td>
<td colspan="4">
text<br>
text<br>
text<br>
text
</td>
</tr>
//in the same way other rows
</table>
It looks in this way:

Not quite sure what you meant, but I've given it a shot. I added a colgroup to depict the difference more clearly, and replaced the HTML5 deprecated border="0" cellpadding="0" cellspacing="0" attributes.
table {
border: 0;
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
width: 100px; /*Needs to be greater than the size of 'From:'*/
}
td {
padding: 0;
}
<table>
<colgroup>
<col span="4" style="background-color:red">
<col span="4" style="background-color:yellow">
</colgroup>
<tr>
<td colspan="8" style="height:10px;"> </td>
</tr>
<tr>
<td colspan="8" style="height:10px;"> </td>
</tr>
<tr>
<td style="position: relative; font-size: 14px;" colspan="8">
text
</td>
</tr>
<tr>
<td colspan="8"> </td>
</tr>
<tr>
<td colspan="4">
To:
</td>
<td colspan="4">
From:
</td>
</tr>
<tr>
<td colspan="4">
text
<br>text
<br>text
<br>text
</td>
<td colspan="4">
text
<br>text
<br>text
<br>text
</td>
</tr>
</table>
Although looking at your image, the following structure would be more appropriate:
table {
border: 0;
border-spacing: 0;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
/*Needs to be greater than the size of 'From:'*/
}
td {
padding: 0;
}
caption {
color: #002B7F;
font-weight: bold;
}
caption,
th {
text-align: left;
}
thead {
background-color: #007C66;
color: white;
}
<table>
<caption>text</caption>
<thead>
<th>To:</th>
<th>From:</th>
</thead>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>

Resources