I wan to arrange columns in my thead to look like the below image
This my code
<thead>
<tr>
<td style="text-align: center;">SUBJECT</td>
<td style="text-align: center;" colspan="3">CA<br> T1 T2 T3</td>
<td style="text-align: center;">CA TOTAL (40)</td>
<td style="text-align: center;">SIGN</td>
</tr>
</thead>
But it displays like this, how can I split the 'CA' column
You need take 2 rows for thead for display.
Here is the complete code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<thead>
<tr>
<td style="text-align: center;" rowspan='2'>SUBJECT</td>
<td style="text-align: center;" colspan="3">CA</td>
<td style="text-align: center;" rowspan='2'>CA TOTAL (40)</td>
<td style="text-align: center;" rowspan='2'>SIGN</td>
</tr>
<tr>
<td style="text-align: center;">T1</td>
<td style="text-align: center;">T2</td>
<td style="text-align: center;">T3</td>
</tr>
</thead>
</table>
</body>
</html>
You can't split a cell into more cells, you can only merge existing cells together. That said, if you want to have five columns you need to create five columns, and rather than using a <br> to force content to a new line in one cell, and then fake separate cells, use two rows of cells. This, of course, requires the appropriate use of the colspan and rowspan attributes, such as the following:
table {
border-collapse: collapse;
}
th,
td {
text-align: center;
border: 1px solid #000;
min-width: 4em;
min-height: 2em;
padding: 0.2em 0.5em;
}
th {
vertical-align: top;
}
<table>
<thead>
<tr>
<!-- rowspan="2" forces the following <th> element
to span two rows in its containing element: -->
<th rowspan="2">SUBJECT</th>
<th colspan="3">CA</th>
<!-- as it does here also: -->
<th rowspan="2">CA TOTAL (40)</th>
</tr>
<tr>
<!-- this <tr> contains only three <th> elements,
unlike the previous <tr> which contains five,
because two <th> elements of the previous row
will occupy space in this <tr> also -->
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td>English Language</td>
<td>3</td>
<td>6</td>
<td>10</td>
<td></td>
</tr>
<tr>
<td>Mathematics</td>
<td>3</td>
<td>5</td>
<td>7</td>
<td></td>
</tr>
</tbody>
</table>
JS Fiddle demo.
Incidentally, where possible try to style your content via the use of stylesheets; this makes it far easier to update your style and presentation in future.
<thead>
<tr>
<td style="text-align: center;" rowspan='2'>SUBJECT</td>
<td style="text-align: center;" colspan="3">CA</td>
<td style="text-align: center;" rowspan='2'>CA TOTAL (40)</td>
<td style="text-align: center;" rowspan='2'>SIGN</td>
</tr>
<tr>
<td style="text-align: center;">T1</td>
<td style="text-align: center;">T2</td>
<td style="text-align: center;">T3</td>
</tr>
</thead>
Use rowspan and 2 trs
th { vertical-align: top; border: 1px solid black;}
<table>
<thead>
<tr>
<th rowspan="2" style="text-align: center;">SUBJECT</th>
<th style="text-align: center;" colspan="3">CA</th>
<th rowspan="2" style="text-align: center;">CA TOTAL (40)</th>
</tr>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
</table>
You can use this. Working perfectly:
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
border: 1px solid #000;
}
</style>
<table>
<thead>
<tr>
<th rowspan="2" >SUBJECT</th>
<th colspan="3">CA</th>
<th rowspan="2">CA TOTAL (40)</th>
<th rowspan="2">SIGN</th>
</tr>
<tr>
<th>T1</th>
<th>T2</th>
<th>T3</th>
</tr>
</thead>
<tbody>
<tr>
<td>English Language</td>
<td>3</td>
<td>6</td>
<td>10</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Mathematics</td>
<td>3</td>
<td>5</td>
<td>7</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Related
I'm trying to add vertical lines to my table that aligns with the headers and I'm using 'border-collapse: separate' as well as colspan that varies from 1 to any number. Here is an image to imagine it
Keeping in mind Cell1 has colspan of 3 and cell 2 has colspan of 2
but I would like to keep the separate border collapse for the view. My approach was to put two tables above each other one for the data with opacity:70% for example to show the table below it and the table below it should have the vertical lines with each header. However, I'm unable in anyway to put two tables in the same position.
<div id="app">
<h2>Todos:</h2>
<ol>
<table
BORDER
>
<thead>
<tr>
<th >
H1
</th>
<th
>
H2
</th>
<th
>
H3
</th>
<th
>
H4
</th>
<th
>
H5
</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</ol>
</div>
Here is a fiddle of the table
http://jsfiddle.net/vrL9s7ft/6/
I have attached a working example here http://jsfiddle.net/whjnt5o2/1/
th, td {
border: 1px solid black;
box-sizing: border-box;
height: 100px;
width: 100px;
text-align: center;
}
table{
border-spacing: 0;
}
table.background-table{
position: absolute;
}
table.background-table th, table.background-table td {
border: 1px dashed gray;
top: 0;
}
<div>
<table class="background-table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tbody>
</table>
<table>
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</div>
I am trying to build a very simple array, but somehow It is not working How I think it should. Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="8">sigle row of 8 cols</th>
</tr>
<tr >
<td colspan="2">2 cols </td>
<td rowspan="3" colspan="6" > 6 cols</td>
</tr>
<tr>
<td colspan="2">2 cols</td>
</tr>
<tr>
<td colspan="2">2 cols</td>
</tr>
</table>
</body>
</html>
Please help me to debug.
I want the months to occupy only 2 column and the saving to occupy 6 columns (the rest), but, this is not working as expected. I know the answer is trivial, but I cannot find it. Can you please tell me what is wrong?
The table will have 8 columns, but you have effectively reduced it to 2. The table rendering algorithm will make things as efficient as it can.
By adding an additional row you can see what is happening
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="8">Monthly Savings</th>
</tr>
<tr >
<td colspan="2">January</td>
<td rowspan="3" colspan="6" >$30000</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
<tr>
<td colspan="2">March</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
What you are better off doing is assigning width to the columns
table, th, td {
border: 1px solid black;
}
<table width=100%>
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr >
<td style="width:33%">January</td>
<td rowspan="3" style="width:66%" >$30000</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td>March</td>
</tr>
</table>
because the you add heading in single <th> so make id different
<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>
so it will display 2 for month and 6 for saving
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table width=100%>
<tr>
<th colspan="2">Monthly</th>
<th colspan="6">Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
<td rowspan="3" colspan="6">$30000</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
<tr>
<td colspan="2">March</td>
</tr>
</table>
</body>
</html>
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/
I have such table: http://jsfiddle.net/jDTTx/
I can't understand how to split cell with text 1 into 2 horizontal cells. Could you help me with this?
You will want to set the rowspan for all of the cells in the row above it to 2, and leave the row span for the two cells which you would like to appear split as 1.
See it in action: http://jsfiddle.net/jDTTx/6/
<table border="1" style="border: 2px solid black; width: 50%; margin: 0 auto; text-align: center; font-weight: bold" cellpadding="0" cellspacing="0">
<thead style="background-color: gray; color: white">
<tr>
<td>№</td>
<td>Час</td>
<td>АУД. 402</td>
<td>АУД. 402<sup>A</sup></td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">8<sup><u>00</u></sup> - 9<sup><u>20</u></sup></td>
<td>1a</td>
<td rowspan="2"></td>
</tr>
<tr>
<td>1b</td>
</tr>
<tr>
<td>2</td>
<td>9<sup><u>35</u></sup> - 10<sup><u>55</u></sup></td>
<td>6</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>11<sup><u>15</u></sup> - 12<sup><u>35</u></sup></td>
<td></td>
<td>7</td>
</tr>
</tbody>
</table>
Place this in your cell:
<div style="border-bottom:solid 1px black">1a</div><div>1b</div>
http://jsfiddle.net/jDTTx/7/