I want to Design a table that has multiple headers. The table design is there:
Have a look at this fiddle
All about colspan and rowspan
<table>
<thead>
<tr>
<th rowspan="2" colspan="1" >
Client Name
</th>
<th rowspan="2" colspan="1">
Date
</th>
<th rowspan="1" colspan="5">
All Appointments
</th>
<th rowspan="1" colspan="3" >
Fulfilled Appointments
</th>
</tr>
<tr>
<th>Total number of individual appointments</th>
<th >Hours Of Care Delivered</th>
<th>Total Value</th>
<th>Average Cost Per Hour</th>
<th>Average Cost Per Hour Per Carer</th>
<th>Total Number</th>
<th>Hours Of Care Fulfilled</th>
<th>Total Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
<html>
<head>
<title>Table</title>
<style>
table,th,td {
border: 2px solid red;
border-collapse: collapse;
}
.heightu{
height: 212px;
}
div.First {
border: 1px solid red;
width: 49px;
height:10px;
left: 15px;
}
div.Second {
border: 1px solid red;
width: 49px;
height:10px;
left: 15px;
}
div.Third {
border: 1px solid red;
width: 39px;
height:10px;
left: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Sl.No</th>
<th rowspan="2">Name</th>
<th colspan="2">Date:15/05/2021</th>
<th rowspan="2">Do </th>
</th>
</tr >
<tr>
<th rowspan=>Start Hour</th>
<th rowspan=>End Hour</th>
</tr>
<tr>
<td>1</td>
<td>John Ddoe</td>
<td ><div class="First"></div></td>
<td><div class="Second"> </div></td>
<td><div class="Third"></div></td>
</tr>
<tr class="heightu">
<td></td>
<td></td>
</td>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
</body>
</html>
Related
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>
I'm new to web designing. I wanted to make a Table of fixed width with subheadings. I coded something like this:
table.all_border *{
border: 1px solid black;
}
<!-- TABLE 1 -->
<table class="all_border" style="width: 564px; margin-top: 10px; font-size: 0.8em; table-layout:fixed; overflow:hidden;">
<tr align="center">
<th style="padding:2.5px; width: 46px;" rowspan="2">Item No</th>
<th style="padding:2.5px; width: 288px;" rowspan="2">DESCRIPTION</th>
<th style="padding:2.5px; width: 30px" rowspan="2">Qty</th>
<th style="padding:2.5px; width: 100px" colspan="2">Rate per Item</th>
<th style="padding:2.5px; width: 100px" colspan="2">AMOUNT</th>
</tr>
<tr>
<th style="width:80px">Rs.</th>
<th style="width:20px">P.</th>
<th style="width:80px">Rs.</th>
<th style="width:20px">P.</th>
</tr>
<tr>
<td>1</td>
<td>Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material </td>
<td>4</td>
<td>12345678</td>
<td>00</td>
<td>12345678</td>
<td>00</td>
</tr>
</table>
<!-- TABLE 2 -->
<table class="all_border" style="width: 564px; margin-top: 10px; font-size: 0.8em;">
<tr align="center">
<th style="padding:2.5px; width: 46px;" rowspan="2">Item No</th>
<th style="padding:2.5px; width: 288px;" rowspan="2">DESCRIPTION</th>
<th style="padding:2.5px; width: 30px" rowspan="2">Qty</th>
<th style="padding:2.5px; width: 100px" colspan="2">Rate per Item</th>
<th style="padding:2.5px; width: 100px" colspan="2">AMOUNT</th>
</tr>
<tr>
<th style="width:80px">Rs.</th>
<th style="width:20px">P.</th>
<th style="width:80px">Rs.</th>
<th style="width:20px">P.</th>
</tr>
<tr>
<td>1</td>
<td>Test Material</td>
<td>4</td>
<td>12</td>
<td>00</td>
<td>12</td>
<td>00</td>
</tr>
</table>
Now my problem is, the width of the sub-headings in Table 1 with table-layout:fixed; (Rs. and P.) are not set as desired and are divided equally.
However, Table 2 is having the desired ratio of (Rs. and P.) but the width is not fixed.
How can I get the best out of the two? Any help is appreciated.
Thanks in advance.
Update
The OP requests that the last 4 <th>are at 80/20 instead of 50/50. The reason why it doesn't change to 80/20 is because the fixed widths must be applied to the first row in order for the widths to conform to explicit lengths.
Removed the colspan:2 property/values
Added 2 <th> to the top row of <thead>
Set the right borders of the <th> at 80px width to 0 none rgba(0,0,0,0)
Set the left borders of the <th> at 20px width to 0 none rgba(0,0,0,0)
In order to center the text over the 2 <th>:
Wrap the text in <b>
Set position:relative and z-index:1
Use <tbody>
Merge both tables because:
They represent the same type of data
And they are close proximity of each other
To merge, remove the end tag </table> of the first table
Remove the opening tag <table> of the second table
Insert the following between the 2 tables:
<tbody>
------Table 1
</tbody>
<tbody>
<tr>
<td colspan='7'>
<div class='space'> </div>
</td>
</tr>
</tbody>
<tbody>
------Table 2
</tbody>
Wrap the top and bottom table sections in <tbody> tags.
Once the CSS from the demo below is applied, this table will appear as empty space.
Using multiple <tbody> in a table is completely valid, compliant to standards, and actually encouraged. AFAIK, the invisible table is ok but if you're concerned with standards, you can place arbitrary data there (doesn't have to be visible text - color:transparent.)
Demo
table.border td,
table.border th {
border: 1px solid black;
}
tbody:last-of-type>tr:first-child>th {
margin-top: 20px;
}
tbody:nth-of-type(2) td {
border: 0 none transparent;
}
.space {
height: 10px;
border: 0 none transparent;
}
.c80.c80 {
width: 80px;
white-space: nowrap;
overflow-x: visible;
text-align: right;
margin-right: -5px;
border-right: 0 none rgba(0, 0, 0, 0) !important;
}
.c20.c20 {
width: 20px;
white-space: nowrap;
overflow-x: visible;
text-align: left;
margin-left: -5px;
border-left: 0 none rgba(0, 0, 0, 0) !important;
}
th b {
display: block;
position: relative;
z-index: 1;
background: #fff;
margin-left: 8px;
}
td:nth-of-type(odd) {
text-align: center;
}
td:nth-of-type(even) {
text-align: right
}
td:nth-of-type(2) {
text-align: left;
}
<main>
<table class="border" style="width: 564px; margin-top: 10px; font-size: 0.8em; table-layout:fixed; overflow:hidden;">
<thead>
<tr>
<th style="padding:2.5px; width: 46px;" rowspan="2">Item No</th>
<th style="padding:2.5px; width: 288px;" rowspan="2">DESCRIPTION</th>
<th style="padding:2.5px; width: 30px" rowspan="2">Qty</th>
<th class='c80'><b>Rate per Item</b></th>
<th class='c20'></th>
<th class='c80'><b>AMOUNT</b></th>
<th class='c20'></th>
</tr>
<tr>
<th style="width:80px">Rs.</th>
<th style="width:20px">P.</th>
<th style="width:80px">Rs.</th>
<th style="width:20px">P.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material Test Material </td>
<td>4</td>
<td>12345678</td>
<td>00</td>
<td>12345678</td>
<td>00</td>
</tr>
</tbody>
<tbody>
<tr>
<td colspan='7'>
<div class='space'> </div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<th style="padding:2.5px; width: 46px;" rowspan="2">Item No</th>
<th style="padding:2.5px; width: 288px;" rowspan="2">DESCRIPTION</th>
<th style="padding:2.5px; width: 30px" rowspan="2">Qty</th>
<th style="padding:2.5px; width: 100px" colspan="2">Rate per Item</th>
<th style="padding:2.5px; width: 100px" colspan="2">AMOUNT</th>
</tr>
<tr>
<th style="width:80px">Rs.</th>
<th style="width:20px">P.</th>
<th style="width:80px">Rs.</th>
<th style="width:20px">P.</th>
</tr>
<tr>
<td>1</td>
<td>Test Material</td>
<td>4</td>
<td>12</td>
<td>00</td>
<td>12</td>
<td>00</td>
</tr>
</tbody>
</table>
</main>
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>
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/
Good evening, I'm trying to align a table to make it like the picture, but failed to do so, I could help?
Now I have it like this:
and I'd like it to look like this:
This is my html code:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>
Specifying the colspan for the cells in the summary row will shift the final cell right.
<th colspan="4" class="text-right" scope="row">TOTAL</th>
Alternatively, you could start the row with a <td> with colspan="3", and using a class that would have no borders (controlled by your css).
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
Without that class, direct manipulation of style may work.
<td style="border:0" colspan="3"></td>
<th class="text-right" scope="row">TOTAL</th>
Updated snippet:
table {
border-collapse: collapse;
font-family: arial;
}
td,
th {
width: auto;
margin: 2px;
padding: 3px;
text-align: left;
border: 1px solid grey;
}
.noborders {
border: 0;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-left">Codigo</th>
<th class="text-left">Descripcion</th>
<th class="text-left">Precio</th>
<th class="text-left">Cantidad</th>
<th class="text-left">Importe</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">1001</td>
<td class="col-md-8">Producto de ejemplo 1</td>
<td class="col-md-1 text-right">$10,000</td>
<td class="col-md-1 text-center">100</td>
<td class="col-md-1 text-right">$1,000,000</td>
</tr>
<tr>
<td colspan="3" class="noborders"></td>
<th class="text-right" scope="row">TOTAL</th>
<td class="text-right">$1,000,000</td>
</tr>
</tbody>
</table>