I have a table with rowspan in first cells of row. I want to select first cells. When I select first child, in some rows after rowspan, first child going to be cells that are not in first row.
How to select just first column of table?
Here is my JSFIDDLE http://jsfiddle.net/qw78pcud/
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table{
font-size: 18px;
color: black;
}
table tr td:first-child{
color: red;
text-align: center;
}
<table>
<thead>
<tr>
<th>Country</th>
<th>Bank Name</th>
<th>SWIFT BIG</th>
<th>Currency</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>Deutsche Bank Trust Company Americas, New Your</td>
<td>BKTRUS33</td>
<td>USD</td>
</tr>
<tr>
<td>Germany</td>
<td>Deutsche Bank AG</td>
<td>DEUTDEFF</td>
<td>EUR</td>
</tr>
<tr>
<td rowspan="2">Austria</td>
<td rowspan="2">Raiffeisen Bank International AG</td>
<td rowspan="2">RZBAATWW</td>
<td>EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr>
<td rowspan="5">Netherlands</td>
<td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
<td rowspan="5">DHBNNL2R</td>
<td >EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>GBP</td></tr>
<tr><td>CHF</td></tr>
<tr><td>JPY</td></tr>
</tbody>
</table>
I used following selector but it selects last childs after rowspan as jsfiddle shows
table tr td:first-child{
color: red;
text-align: center;
}
Note: I can't set class or id to table elements. I need to access with css.
Edit: What can we do in This case? http://jsfiddle.net/qw78pcud/6
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table{
font-size: 18px;
color: black;
}
table tr td:first-child:not(:only-child) {
color: red;
text-align: center;
}
<table>
<thead>
<tr>
<th>Country</th>
<th>Bank Name</th>
<th>SWIFT BIG</th>
<th>Currency</th>
</tr>
</thead>
<tbody>
<tr>
<td>USA</td>
<td>Deutsche Bank Trust Company Americas, New Your</td>
<td>BKTRUS33</td>
<td>USD</td>
</tr>
<tr>
<td>Germany</td>
<td>Deutsche Bank AG</td>
<td>DEUTDEFF</td>
<td>EUR</td>
</tr>
<tr>
<td rowspan="2">Austria</td>
<td rowspan="2">Raiffeisen Bank International AG</td>
<td rowspan="2">RZBAATWW</td>
<td>EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr>
<td rowspan="5">Netherlands</td>
<td rowspan="5">Demir - Halk Bank (Nederland) N.V.</td>
<td rowspan="5">DHBNNL2R</td>
<td >EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>GBP</td></tr>
<tr><td>CHF</td></tr>
<tr><td>JPY</td></tr>
<tr>
<td rowspan="10">Russia</td>
<td rowspan="3">CB “Garanti Bank – Moscow” (ZAO)</td>
<td rowspan="3">GABMRUMM</td>
<td >EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>RUB</td></tr>
<tr>
<td rowspan="2">Sberbank of Russia </td>
<td rowspan="2">SABRRUMM</td>
<td>USD</td>
</tr>
<tr><td>RUB</td></tr>
<tr>
<td rowspan="3">JSCB “Yapi Kredi Bank Moscow" (CJSC)</td>
<td rowspan="3">YKBMRUMM</td>
<td>EUR</td>
</tr>
<tr><td>USD</td></tr>
<tr><td>RUB</td></tr>
<tr>
<td rowspan="2">ZAO Raiffeisenbank </td>
<td rowspan="2">RZBMRUMM</td>
<td>USD</td>
</tr>
<tr><td>RUB</td></tr>
</tbody>
</table>
You could achieve that by using a combination of :not() and :only-child pseudo-classes as follows:
Example Here
table tr td:first-child:not(:only-child) {
color: red;
text-align: center;
}
This would exclude the cells that are the only child of their parents - the rows.
Related
I need to make markup for creating the next table (using HTML):
task
Here is my way of making that (doesn't work):
Step 1: Making "general" markup with all cells of equal size:
td { border: solid #aaa 1px }
<table>
<thead>
<tr>
<th colspan="4">Some Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</tbody>
</table>
Output: Step 1
Step 2: Using "colspan" and "rowspan" for making cells 1.3 and 2.1 bigger and deleting unnecessary cells (1.4, 2.3, 2.4, 3.3 and 3.4), except one (2.2 , just for now): Step 2
Step 3: As soon as I delete cell 2.2 - big cells (1.3 and 2.1) become "smaller": Step 3 and it isn't what I need...
Here is my final markup:
td { border: solid #aaa 1px }
<table>
<thead>
<tr>
<th colspan="4">Some Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
I can't find out how to delete cell 2.2 and keep table's shape as it mentioned in the task... Appreciate any help.
Here is we Achieve the Output
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
height: 30px;
width: 50px;
text-align: center;
}
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan=2>1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
You should try to this code
td {
border: 1px solid #579;
}
<table>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
You should try this
<style>td{border:1px solid black;}
tr{height:35px;}
</style>
<table>
<tbody>
<tr>
<td colspan="4">Head</td>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
I am trying to create a table similar to the one shown in the attached screenshot. Data for this table is coming through the python script, but I need some inputs on HTML side on how to create a table that can span through multiple rows
With my little knowledge on HTML, I tried creating the table with the following code, but it doesn't appear like its working as expected. It would be highly helpful if anyone can throw some light on what could be wrong here
table,
td,
th {
font-family: Verdana;
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: green;
color: white;
}
th,
tr {
height: 50px;
}
td {
font-family: Verdana;
font-size: 15pt;
text-align: center;
}
body {
background-color: lightgreen
}
<table style="width:100%">
<table>
<tr>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
</tr>
<tr>
<td rowspan="4">project1</td>
<td rowspan="4">prod</td>
<td rowspan="4">project1data</td>
<td rowspan="4">project1 multi row data1</td>
<td rowspan="4">project1 multi row data2</td>
</tr>
<tr>
<td rowspan="4">project2</td>
<td rowspan="4">stage</td>
<td rowspan="4">project2data</td>
<td rowspan="4">project2 multi row data1</td>
<td rowspan="4">project2 multi row data2</td>
</tr>
<tr>
<td rowspan="4">project3</td>
<td rowspan="4">test</td>
<td rowspan="4">project3data</td>
<td rowspan="4">project3 multi row data1</td>
<td rowspan="4">project3 multi row data2</td>
</tr>
<tr>
<td rowspan="4">project4</td>
<td rowspan="4">dev</td>
<td rowspan="4">project4data</td>
<td rowspan="4">project4 multi row data1</td>
<td rowspan="4">project4 multi row data2</td>
</tr>
<tr>
<td rowspan="4">project5</td>
<td rowspan="4">qa</td>
<td rowspan="4">project5data</td>
<td rowspan="4">project5 multi row data1</td>
<td rowspan="4">project5 multi row data2</td>
</tr>
</table>
The mistake is that you have rowspan="4" even in the last td. You will need to avoid a rowspan there:
<table>
<tr>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
</tr>
<tr>
<td rowspan="3">project1</td>
<td rowspan="3">prod</td>
<td rowspan="3">project1data</td>
<td>project1 multi row data1</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data3</td>
</tr>
<tr>
<td rowspan="3">project2</td>
<td rowspan="3">stage</td>
<td rowspan="3">project2data</td>
<td>project2 multi row data1</td>
</tr>
<tr>
<td>project2 multi row data2</td>
</tr>
<tr>
<td>project2 multi row data3</td>
</tr>
<tr>
<td rowspan="3">project3</td>
<td rowspan="3">test</td>
<td rowspan="3">project3data</td>
<td>project3 multi row data1</td>
</tr>
<tr>
<td>project3 multi row data2</td>
</tr>
<tr>
<td>project3 multi row data3</td>
</tr>
<tr>
<td rowspan="3">project4</td>
<td rowspan="3">dev</td>
<td rowspan="3">project4data</td>
<td>project4 multi row data1</td>
</tr>
<tr>
<td>project4 multi row data2</td>
</tr>
<tr>
<td>project4 multi row data3</td>
</tr>
<tr>
<td rowspan="3">project5</td>
<td rowspan="3">qa</td>
<td rowspan="3">project5data</td>
<td>project5 multi row data1</td>
</tr>
<tr>
<td>project5 multi row data2</td>
</tr>
<tr>
<td>project5 multi row data3</td>
</tr>
</table>
Please check this :
Basically you can use simple <div> inside the td to accomplish this for 3rd table column.
https://jsfiddle.net/ryb0w54a/
table { border:1px solid #000;border-collapse:collapse;}
th {border:1px solid #000;}
td { border:1px solid #000;}
div { border-bottom : 1px solid #000}
div.last { border-bottom : 0;}
<table>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
<tr>
<td>Project 1</td>
<td>Env 1</td>
<td>Project 1 Data</td>
<td>
<div>project1 multi row data1</div>
<div>project1 multi row data2</div>
<div class="last">project1 multi row data3</div>
</td>
</tr>
<tr>
<td>Project 1</td>
<td>Env 1</td>
<td>Project 1 Data</td>
<td>
<div>project1 multi row data1</div>
<div>project1 multi row data2</div>
<div class="last">project1 multi row data3</div>
</td>
</tr>
</table>
remove rowspan=4 for your multiple data column and add them to another <tr> with rowspan=1 after relative no. of empty divs.
I think this will help you what you require
table,
td,
th {
font-family: Verdana;
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: green;
color: white;
}
th,
tr {
height: 50px;
}
td {
font-family: Verdana;
font-size: 15pt;
text-align: center;
}
body {
background-color: lightgreen
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Environment</th>
<th>Data</th>
<th>Multiple Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>
<table>
<tbody>
<tr>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Your approach was correct but the way you implemented it has a small mistake. I think this code will give you the proper way to address your problem. The code is pretty basic but will help you to understand how it works.
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">Data 1</td>
<td rowspan="4">Data 2</td>
</tr>
<tr>
<td>Data 2.1</td>
</tr>
<tr>
<td>Data 2.1</td>
</tr>
<tr>
<td>Data 2.1</td>
</tr>
</tbody>
</table>
You can do this simply without using rowspan and just adding another table in the last td where the multiple rows will come.
Here we go :
table,
td,
th {
font-family: Verdana;
border: 2px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
background-color: green;
color: white;
}
th,
tr {
height: 50px;
}
td {
font-family: Verdana;
font-size: 15pt;
text-align: center;
}
body {
background-color: lightgreen
}
table tr td table {
border: none;
}
table tr td table td {
border-left: none;
border-right: none;
}
table tr td table tr:first-child td {
border-top: none;
}
table tr td table tr:last-child td {
border-bottom: none;
}
<table>
<tr>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
</tr>
<tr>
<td>project1</td>
<td>prod</td>
<td>project1data</td>
<td>
<table>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>project2</td>
<td>prod</td>
<td>project1data</td>
<td>
<table>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>project3</td>
<td>prod</td>
<td>project1data</td>
<td>
<table>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
<tr>
<td>project1 multi row data2</td>
</tr>
</table>
</td>
</tr>
</table>
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/
The table is in the image attached below.
Can anyone help me out with the html and css to create this? I have been trying for about an hour or two. I cant get a separate border around each table. as well as the spacing. Pretty much everything I'm having trouble with, I don't know CSS yet but my lecturer asked us to try it out.
Tables I'm having trouble with
td { "background-color: #D3D3D3;
}
table {
border:1 px; solid #D3D3D3;
}
<table>
<tr>
<td> Short title: </td>
<td> Data Driven Apps I </td>
</tr>
</table>
You can achieve the styling with border-spacing and border-collapse and join columns with colspan
demo: http://codepen.io/anon/pen/ZBEZNb
css:
table {
border-spacing:0 10px;
border-collapse:separate;
}
td {
padding:2px 10px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
td.gray {
background:#ddd
}
td:last-child {
border-right:1px solid #ddd;
}
html:
<table>
<tr>
<td class="gray">Short Title</td>
<td colspan="2">Data Driven Apps 1</td>
<td colspan="3"></td>
</tr>
<tr>
<td class="gray">Full Title</td>
<td colspan="2">Data Driven Apps 1</td>
<td colspan="3"></td>
</tr>
<tr>
<td class="gray">Attendance</td>
<td>N/A</td>
<td></td>
<td class="gray">Discipline</td>
<td colspan="2">Databases</td>
</tr>
<tr>
<td class="gray">Coordinator</td>
<td>Gerry</td>
<td></td>
<td class="gray">Department</td>
<td colspan="2">Information Technology</td>
</tr>
<tr>
<td class="gray">Official Code</td>
<td>GATB</td>
<td class="gray">NFQ Level</td>
<td>08</td>
<td class="gray">ECTS Credit</td>
<td>05</td>
</tr>
</table>