Get borders to head rows and head columns with pure CSS - html

I am working on a system (maybe you guessed it from the snippet, it's confluence) and try to style tables.
Important
I have no chance to modify the table-html output, I can only add some CSS styles. The tables can occur in every combination on a page and are added by users.
This is the structure and possible table comibnations - this is only an example - there are other combinations.
.confluenceTable {
border-collapse: collapse;
}
.confluenceTh, .confluenceTd {
padding: 6px 8px;
border: 1px solid #888a85;
border-right: none;
border-bottom: none;
}
table.confluenceTable tr:first-child .confluenceTh,
table.confluenceTable tr:first-child .confluenceTd {
border-top: none;
}
.confluenceTh:first-child, .confluenceTd:first-child {
border-left: none;
}
table.confluenceTable thead tr:first-child .confluenceTh {
border-bottom: 2px solid #CC0018;
}
table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
border-left: 2px solid #CC0018;
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd">1.1</td>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">1.1</th>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
<thead>
<tr>
<!-- This element should also have a border right -->
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
The Problem is the Fourth table - I found no way to add a border-right to 1.1, which is column and row header. Does anyone see a pure CSS solution?
In a future step, there might also be headers in the middle of a table...


Make use of nth-of-type pseudo selector as below to select 4th table and add border to right-side of th first-child.
The :nth-of-type(an+b) CSS pseudo-class matches an element that has
an+b-1 siblings with the same element name before it in the document
tree, for a given positive or zero value for n, and has a parent
element.
table.confluenceTable:nth-of-type(4) > thead > tr > th:first-child{
border-right:2px solid #CC0018;
}
.confluenceTable {
border-collapse: collapse;
}
.confluenceTh, .confluenceTd {
padding: 6px 8px;
border: 1px solid #888a85;
border-right: none;
border-bottom: none;
}
table.confluenceTable tr:first-child .confluenceTh,
table.confluenceTable tr:first-child .confluenceTd {
border-top: none;
}
.confluenceTh:first-child, .confluenceTd:first-child {
border-left: none;
}
table.confluenceTable thead tr:first-child .confluenceTh {
border-bottom: 2px solid #CC0018;
}
table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
border-left: 2px solid #CC0018;
}
table.confluenceTable:nth-of-type(4) > thead > tr > th:first-child{
border-right:2px solid #CC0018; /*Add this*/
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd">1.1</td>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">1.1</th>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
<thead>
<tr>
<!-- This element should also have a border right -->
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>


Your problem, more generally
You have the following structure in your HTML.
element.A1
element.A2
element.B1
element.B2
Now, you want to style A2 depending on some properties B2 has. For example, if B2 is present, if B2 is a specific type of element (like a div or span), if it has a certain attribute ([data-foo="bar"]), et cetera.
Solving using CSS
Unfortunately, it is currently not possible to do this using a pure CSS solution. This is because all selectors in CSS go from an element to any descendant of that element, but never the other way around. For example, a b selects all elements of type b that are a descendant of a. With a > b, only children of a type elements are considered. There is however no way to go the other way.
Solving using JS + CSS
For now, you can solve your problem by using a certain class and applying that class using JavaScript. Something along the lines of the following.
.A1.special .A2 {
/* special styling on A2 */
}
var b2s = document.querySelectorAll('.B2'), i;
for (i = 0; i < b2s.length; ++i) {
if (isSpecial(b2s[i])) {
b2s[i].parentNode.previousSibling.classList.add('special');
}
}
References: querySelectorAll, parentNode, previousSibling, classList.
The isSpecial function would check for whatever properties you would want to check for. In particular, I implemented your specific question in the following snippet.
// detect special case and add class for CSS styling
var firstRows = document.querySelectorAll('.confluenceTable tbody > tr:first-child'), i;
for (i = 0; i < firstRows.length; ++i) {
if (firstRows[i].querySelector('th') !== null) {
firstRows[i].parentNode.parentNode.classList.add('special');
}
}
.confluenceTable {
border-collapse: collapse;
}
.confluenceTh, .confluenceTd {
padding: 6px 8px;
border: 1px solid #888a85;
border-right: none;
border-bottom: none;
}
table.confluenceTable tr:first-child .confluenceTh,
table.confluenceTable tr:first-child .confluenceTd {
border-top: none;
}
.confluenceTh:first-child, .confluenceTd:first-child {
border-left: none;
}
table.confluenceTable thead tr:first-child .confluenceTh {
border-bottom: 2px solid #CC0018;
}
table.confluenceTable tr .confluenceTh + :not(.confluenceTh) {
border-left: 2px solid #CC0018;
}
/* add styling for the exceptional case */
table.confluenceTable.special > thead > tr > th:first-child{
border-right:2px solid #CC0018;
}
<h2>First</h2>
<p>table without headers</p>
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd">1.1</td>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Second</h2>
<p>table with column header</p>
<table class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd">1.2</td>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<td class="confluenceTd">1.3</td>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Third</h2>
<p>table with row header</p>
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">1.1</th>
<td class="confluenceTd">2.1</td>
<td class="confluenceTd">3.1</td>
</tr>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>
<h2>Fourth</h2>
<p>table with row and column header</p>
<table class="confluenceTable">
<thead>
<tr>
<!-- This element should also have a border right -->
<th class="confluenceTh">1.1</th>
<th class="confluenceTh">2.1</th>
<th class="confluenceTh">3.1</th>
</tr>
</thead>
<tbody>
<tr>
<th class="confluenceTh">1.2</th>
<td class="confluenceTd">2.2</td>
<td class="confluenceTd">3.2</td>
</tr>
<tr>
<th class="confluenceTh">1.3</th>
<td class="confluenceTd">2.3</td>
<td class="confluenceTd">3.3</td>
</tr>
</tbody>
</table>


Try this)
body > .confluenceTable:nth-child(12) thead tr:first-child th:first-child {
border-right: 2px solid #CC0018;
}
Live demo - https://jsfiddle.net/grinmax_/wxfL4ocg/

Related

CSS selector for direct table `th` element without child table's `th` element - is possible

How to select the th element of table without selecting it's child th? is it possible? is there any selector like so?
here is the demo:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
thead:first-of-type th {
background-color: gray;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
When i add the gray background it added with tables child elements of the too. is there any direct selector to only select the parent level th element?
Thanks in advance.

You need to add one class to the main table. Try this code
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
.parent-table>thead:first-of-type th {
background-color: gray;
}
<table class="parent-table">
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>

You can try this:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
table > thead:first-of-type > tr > th {
background-color: gray;
}
table > tbody > tr td table > thead:first-of-type > tr > th{
background-color: white;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>

tr tag from table doesn't start on new line

Can somebody please explain to me why the second row is not on a new line?
$(document).ready(function() {
$('.rotate').css('height', $('.rotate').width());
});
td {
border-collapse: collapse;
border: 1px black solid;
}
th {
border: 1px black solid;
border-collapse: collapse;
}
tr {
text-align: center;
}
.rotate {
-webkit-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<tr>
<th rowspan="2">EON</th>
<th colspan="2" rowspan="2">ERA</th>
<th colspan="3" rowspan="2">PERIOADA</th>
<th colspan="2" rowspan="2">Cicluri orogenice</th>
<th rowspan="2">Mil. ani în urmă</th>
<th colspan="4" rowspan="2">Viețuitoare tipice</th>
</tr>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</table>
(fiddle)

rowspan="2" in the th elements (even in all of them) doesn't really make sense. If you remove it, you get a regular table:
table {
border-collapse: collapse;
}
td, th {
border: 1px dotted #aaa;
}
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<tr>
<th>EON</th>
<th colspan="2">ERA</th>
<th colspan="3">PERIOADA</th>
<th colspan="2">Cicluri orogenice</th>
<th>Mil. ani în urmă</th>
<th colspan="4">Viețuitoare tipice</th>
</tr>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</table>

Use thead and tbody tag
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<thead>
<tr>
<th rowspan="2">EON</th>
<th colspan="2" rowspan="2">ERA</th>
<th colspan="3" rowspan="2">PERIOADA</th>
<th colspan="2" rowspan="2">Cicluri orogenice</th>
<th rowspan="2">Mil. ani în urmă</th>
<th colspan="4" rowspan="2">Viețuitoare tipice</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</tbody>
</table>

Just include row of head part (<th>) to the <thead> tag and the other part of the row inlude in <tbody>. Hope it will help work as you expect.
td {
border-collapse: collapse;
border: 1px black solid;
}
th {
border: 1px black solid;
border-collapse: collapse;
}
tr {
text-align: center;
}
<table cellpadding="10" cellspacing="0" align="center">
<caption>SCARA GEOCRONOLOGICĂ</caption>
<thead>
<tr>
<th rowspan="2">EON</th>
<th colspan="2" rowspan="2">ERA</th>
<th colspan="3" rowspan="2">PERIOADA</th>
<th colspan="2" rowspan="2">Cicluri orogenice</th>
<th rowspan="2">Mil. ani în urmă</th>
<th colspan="4" rowspan="2">Viețuitoare tipice</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="13">FANEROZOIC</td>
<td colspan="2" rowspan="4">CAINOZOIC(NEOZOIC) Cz</td>
<td colspan="3">Cuaternar Q</td>
<td colspan="2" rowspan="3">Ciclul alpin</td>
<td rowspan="15">0,01</td>
<td colspan="4">Omul primitiv, mamut, ren, bou moscat, rinocer</td>
</tr>
</tbody>
</table>

How can I construct a table header than contains multiple rows in column?

I would like to construct a table as follows:
I am trying to construct same table in html but having trouble. Table header needs to be exact. Any help is helpful

You can use the rowspan attribute:
th {
border:1px solid #000;
height: 20px;
width: 150px;
}
<table>
<thead>
<tr>
<th rowspan="4">#</th>
<th>Name</th>
<th rowspan="2">Permanent Address</th>
<th rowspan="2">Type of Job</th>
<th rowspan="2">Start work</th>
</tr>
<tr>
<th>ID</th>
</tr>
<tr>
<th>M/F</th>
<th rowspan="2">Contract</th>
<th rowspan="2">Place of Work</th>
<th rowspan="2">Work Stops</th>
</tr>
<tr>
<th>Birth</th>
</tr>
</thead>
</table>
FYI: there is also a colspan attribute if you need to span multiple columns.

Try this......
body {
padding: 50px;
}
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td rowspan="4">#</td>
<td>Name</td>
<td rowspan="2">Permanent Address</td>
<td rowspan="2">Type of Job</td>
<td rowspan="2">Start work</td>
</tr>
<tr>
<td>ID</td>
</tr>
<tr>
<td>M/F</td>
<td rowspan="2">Contract</td>
<td rowspan="2">Place of Work</td>
<td rowspan="2">Work Stops</td>
</tr>
<tr>
<td>Birth</td>
</tr>
</tbody>
</table>

Hide table columns by class

I have a table from n columns. Each cell has a class column-n.
I want to add on table class hide-column-n and hide all cells with class column-n.
Is this possible do it through css?
Example:
.table {
border: 1px solid black;
}
.table thead{
background-color: lightgray;
}
.table td{
border: 1px solid gray;
width: 50px;
}
<table class="table">
<thead>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
</thead>
<tbody>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td class="column-1">One</td>
<td class="column-2">Two</td>
<td class="column-3">Three</td>
<td class="column-x">...</td>
<td class="column-n">N</td>
</tr>
<tr>
<td>...</td>
</tr>
</tbody>
</table>

Here is example https://jsfiddle.net/xr21kwrh/
<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
th:nth-child(2){display: none;}
td:nth-child(2){display: none;}
</style>

<table class="table">
<thead>
<tr>
<th class=column-1">One</th>
<th class"column-2">Two</th>
...
<th class="column-n">N</th>
</tr>
</thead>
<tbody>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
<tr>
<td class=column-1">One</t>
<td class"column-2">Two</td>
...
<td class="column-n">N</td>
</tr>
...
</tbody>
</table>
<style>
.column-n{ display-none !important; }
</style>

If you use sass/scss you can do so (in SCSS):
#for $i from 1 through 10 {
.hide-column-#{$i} .column-#{$i} {
display: none;
}
}
it will compile to:
.hide-column-1 .column-1 {
display: none;
}
.hide-column-2 .column-2 {
display: none;
}
....
.hide-column-n .column-n {
display: none;
}
then use it like expected:
<table class="table hide-column-1 hide-column-2">
codepen demo here

HTML order rows and table

The following HTML code displays the value of Heading9 and Heading10 in a separate row instead of displaying right after Heading8 (see ActualOutput image)
Code 1:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</tbody>
</TABLE>
</html>
Actual Output:
I can get the desired output by changing the code 1 to code 2, however, my bash script gathers Heading9 and Heading10 data only after Heading8 is framed for each body, so I cannot inject Heading9 and 10 in between.
Appreciate if experts can provide a better solution to get the expected output by restructuring the code 1. Unfortunately, code 2 doesn't work in my scenario.
Code 2:
<html><body bgcolor="#E6E6FA">
<TABLE cellpadding="5" style="border: 1px solid #000000; border-collapse: collapse;" border="2">
<TH>Heading1</TH>
<TH>Heading2</TH>
<TH>Heading3</TH>
<TH>Heading4</TH>
<TH>Heading5</TH>
<TH>Heading6</TH>
<TH>Heading7</TH>
<TH>Heading8</TH>
<TH>Heading9</TH>
<TH>Heading10</TH>
<TH colspan="20">Heading11</TH>
</TR>
<tbody>
<TR>
<TD rowspan="2">knnjkn</TD>
<TD>ceecev</TD>
<TD>lnlnlkn</TD>
<TD>lknlkn</TD>
<TD>lknkn</TD>
<TD>kjnkljnk</TD>
<TD>lknlkn</TD>
<TD>kjnlkn</TD>
<TD>kjbkn</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>jknklnk</TD>
<TD>kjnlknknm</TD>
<TD>jnkj n</TD>
<TD>lnnkkl</TD>
<TD>kjnknkj</TD>
<TD>sdwewcw</TD>
<TD>qwdcwcwc</TD>
<TD>csdcs</TD>
</TR>
</tbody>
<tbody>
<TR>
<TD rowspan="2">ddccs</TD>
<TD>csdcs</TD>
<TD>csdcs</TD>
<TD>cswewc</TD>
<TD>csdcsdc</TD>
<TD>cdwdc</TD>
<TD>cdsc</TD>
<TD>zcxascsac</TD>
<TD>csdcdc</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
<TD rowspan="2" bgcolor=#00BFFF>SUCCESS</TD>
</TR>
<TR>
<TD>dadcc</TD>
<TD>csdc</TD>
<TD>cacsc</TD>
<TD>cdwcc</TD>
<TD>csdd</TD>
<TD>csdc</TD>
<TD>sdcsdc</TD>
<TD>cdscsd</TD>
</TR>
</tbody>
</TABLE>
</html>
Expected Output:

Add Following may this help...
<style>
table
{
border: 1px solid #000000;
border-collapse: collapse;
display:table;
position:relative;
width:100%;
}
table tr
{
display: table-row;
height: 35px;
line-height: 30px;
width: 100%;
}
table td
{
direction: ltr;
display: table-cell;
margin: 0;
padding: 5px;
table-layout: fixed;
}
</style>