I'm trying to solve a specific problem with CSS selectors. I have the foillowing HTML:
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
What I need to do is select the first occurence of the class "Region" within the document, and then select the th element, which contains the text "Header 1" (there will only be 1 th element within these tables). My reason for this is so i can apply a background color to this element.
I currently have this css which applies background color to the th elements of the two "Region" tables:
TABLE.Region TH {background-color: #00A5DB;}
But I want to apply background-color: #BAD80A to only the first occurence of "Region"
I know I can achieve this using javascript and I know this is an old way of arranging elements on a page, but this is a change to a company intranet with many pages, so changing just the style sheet would be by far the quickest way of acheiving this, as I don't really have the time to make sweeping changes at the moment! We use IE11 as our main browser, so the answer can be quite specific if necessary.
Any help would be appreciated!
Thanks
You can use the first-child psuedo-selector on the td and then target the th inside .region.
Here's a demo:
td:first-child .Region th {
background-color: red;
}
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
/*Both work fine*/
table.Layout td:first-child th{
background: #555;
}
td:first-child th{
background: #555;
}
JSFiddle - http://jsfiddle.net/uL9uLLuf/
Related
I want to make table like this. A has 5row and B has 2.5row. I show another question about rowspan vlaue have to be integer. So I tried to revise totalrow is 6 and A is 6row , B is 3row, C is 1row and one is 2row. But I can't do like this image. If you can solve it, please talk to me.
Here's a basic example for you. You add the rowspan to the TD Tag and then on the subsequent rows, you have 1 less TD tag
table, tr, td { border:1px solid black; border-collapse: collapse }
<table>
<tr>
<td rowspan="2">Row Span 2</td>
<td>Normal Column</td>
</tr>
<tr>
<td>Normal Column</td>
</tr>
</table>
EDIT - Taking into account the fact that column B is 2.5 rows tall, and after review of the other answer, here is complete method, which uses both an extra table and rowspan
table, tr, td { border:1px solid black; border-collapse: collapse }
<html>
<body>
<table border=1 width=100% height=100%>
<tr>
<td rowspan="5">A</td>
<td rowspan="5" height=100%>
<table border=1 width=100% height="100%">
<tr>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
</tr>
</table>
</td>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
<tr>
<td>C3</td>
</tr>
<tr>
<td>C4</td>
</tr>
<tr>
<td>C5</td>
</tr>
</table>
</body>
</html>
I have the following table:
Comm Layer
Implemented By
Application
Application
Transport
OS
Internet
OS
Link
OS
Link
Hardware
<table>
<thead>
<tr>
<th>Comm Layer</th>
<th>Implemented By</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td>OS</td>
</tr>
<tr>
<td>Internet</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>OS</td>
</tr>
<tr>
<td>Link</td>
<td>Hardware</td>
</tr>
</tbody>
</table>
I would like to merge the two cells that say "Link" and the three cells that say "OS". I tried using the rowspan attribute in several ways but to no avail. I was able to merge either the two "Link" cells or the three "OS" cells, but not both.
In short: you cannot have a <tr> where all cells participate in a rowspan="" because that creates a zero-height row (as there's no row-specific content). I feel this is a design flaw in HTML.
One workaround is to have a zero-width column that always has non-rowspan="" cells (which are propped up with , but hidden (using visibility: hidden;, not display: none;):
(My posted code comments out the removed cells with <!--<td>OS</td>--> for illustrative purposes, obviously you can remove those in your final version)
table {
border: 1px solid #999;
border-collapse: collapse;
}
th, td {
border: 1px solid #999;
}
tr > *:nth-child(1) { visibility: hidden; }
<table>
<thead>
<tr>
<th> </th>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td> </td>
<td>Transport</td>
<td rowspan="3">OS</td>
</tr>
<tr>
<td> </td>
<td>Internet</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<td rowspan="2">Link</td>
<!--<td>OS</td>-->
</tr>
<tr>
<td> </td>
<!--<td>Link</td>-->
<td>Hardware</td>
</tr>
</tbody>
</table>
There's probably improvements using more modern CSS techniques to enforce a minimum row height though - I've been using the technique since before I stopped using Dreamweaver in 2004.
<!-- Try this one -->
<table align="center" cellspacing="0" cellspadding=="0">
<thead>
<tr>
<th>Comm Layer</th>
<th>Jurisdiction</th>
</tr>
</thead>
<tbody>
<tr>
<td>Application</td>
<td>Application</td>
</tr>
<tr>
<td>Transport</td>
<td rowspan="2">OS</td>
</tr>
<tr>
<td>Internet</td>
</tr>
<tr>
<td rowspan="2">Link</td>
<td>OS</td>
</tr>
<tr>
<td>Hardware</td>
</tr>
</tbody>
</table>
How can I do to change the style of the first row of a group of rows (identified by a td with a sub-item class) that is near to a sibling row (identified by a td with the item class):
HTML:
<table>
<thead>
</thead>
<tbody>
<tr>
<td class="item"></td>
</tr>
<tr>
<td class="sub-item"><!-- I need to style this one --></td>
</tr>
<tr>
<td class="sub-item"></td>
</tr>
<tr>
<td class="sub-item"></td>
</tr>
<tr>
<td class="item"></td>
</tr>
<tr>
<td class="sub-item"><!-- I need to style this one --></td>
</tr>
</tbody>
</table>
I'd like to style with an inset box-shadow all the first rows matched by this criteria.
I tried with the sibling operator without success:
CSS:
tr > td.item ~ tr > td.sub-item:first {}
With the current code you would have to use :nth-[last]-child()
tr:first-child + tr .sub-item, tr:nth-last-child(2) + tr .sub-item {
background-color: red
}
<table>
<thead>
</thead>
<tbody>
<tr>
<td class="item">1</td>
</tr>
<tr>
<td class="sub-item">2<!-- I need to style this one --></td>
</tr>
<tr>
<td class="sub-item">3</td>
</tr>
<tr>
<td class="sub-item">4</td>
</tr>
<tr>
<td class="item">5</td>
</tr>
<tr>
<td class="sub-item">6<!-- I need to style this one --></td>
</tr>
</tbody>
</table>
Also, you can add a class to tr and achieve what you want.
.row + tr .sub-item {
background-color: red
}
<table>
<thead>
</thead>
<tbody>
<tr class="row">
<td class="item">1</td>
</tr>
<tr>
<td class="sub-item">2<!-- I need to style this one --></td>
</tr>
<tr>
<td class="sub-item">3</td>
</tr>
<tr>
<td class="sub-item">4</td>
</tr>
<tr class="row">
<td class="item">5</td>
</tr>
<tr>
<td class="sub-item">6<!-- I need to style this one --></td>
</tr>
</tbody>
</table>
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
I have a nested table as follows -
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Requirement - Only TEXTA and TEXTB should be colored in red. In real scenario there are many rows. I want only the first td of each row in the parent table to be colored. I am doing something like -
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
This is not giving me any result. What is the correct way of achieving this?
Spent a while playing around with this. The best I can do is to suggest using 2 lines of CSS rather than 1. One selector to do all of the first row of td and one to set the nested ones back to how they belong.
table.parent tr:first-child td {
color: red;
}
table.nested tr:first-child td {
color: black;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
You said that..
I want only the first td of each row in the parent table to be colored
So, I am assuming you want TEXTA and TEXTC to be colored (and not TEXTB as you stated).
If thats the case, then your idea was to select elements (first td of each row) if they dont contain a specific child element (table.nested).
This is not possible with CSS2 or CSS3.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
See CSS selector - element with a given child
Edit
You can use jquery/javascript to do so.
For example, to add opacity and color css properties:
$(document).ready(function(){
$('table.parent > tbody > tr > td:first-child').each(function(){
if ($(this).has('table.nested').length == 0){
$(this).css('opacity', '0.5');
$(this).css('color', 'red');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Just give some class to TEXTA & TEXTB
for example:
(html)
<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>
(css)
.red-color-text{color: red;}
I want to create a table like shown in the image using HTML. How to do?
User colspan="3" attribute if you need marge two cells into one .
w3schools
th, td {
background: #ddd;
padding: 2px;
}
<table>
<tr>
<th> </th>
<th>9AM</th>
<th>10AM</th>
<th>11AM</th>
<th>12AM</th>
</tr>
<tr>
<td>Mon day</td>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>tuesDay</td>
<td scope="col" colspan="3"> </td>
<!-- The following two cells will appear under the same header -->
<td>Col 1</td>
</tr>
</table>