If I have the HTML below I want to find a single CSS class definition that will effect the outermost table but not the sub tables. Without changing the HTML can I get .myClass to do this:
I was playing around with the not selector but couldn't get it to work.
.myClass tr td div :not(table) {
background-color: red;
}
<body>
<div class="myClass">
<table>
<tr>
<td>
<div>My</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>World</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
No you cannot do this with pure css without changing your html.
You can do it with jQuery or by simply putting the 'My' inside of a span, because text is not accesible by a selector.
But in all fairness your question was partly answered by #Pangloss. To access the outer table, just use >. Your problem lies in the fact that on the 2nd and 3rd rows, you still have the outer table present. Your question should actually be something like "What's the selector for an element that does not have a specific child type", and then you would find that you cannot target a parent of an element on css yet.
The first cell is the first div inside the first tr, we can target this using the following:
tr:first-child div:first-child{
background:red;
}
Full snippet:
tr:first-child div:first-child {
background: red;
}
<body>
<div class="myClass">
<table>
<tr>
<td>
<div>My</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>Hello</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<table>
<tr>
<td>World</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
Related
It's a complicated one I think. Let's see if I'm wrong.
I want to select only the td which are marked as "// to be selected"
I dont want to apply styles for any other td other than the marked ones.
Please help!
<table>
<tbody>
<tr>
<td> // to be selected
<div>
<div>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td> // to be selected
<div>
<div>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td> // to be selected
<div>
<div>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Thanks in Advance!
Use td to set styles to all td elements and use td td to reset the styles to the nested td elements.
td {
// styles
}
td td {
// styles to reset the nested elements
}
As suggested before (and in my opinion the best option), you can add a class to the td elements you want to select, you can also select them using specificity by using the path to those elements.
CSS
table tbody tr td{
/* your code here */
}
var table = document.getElementsByTagName('table')[0]
let tbody = table.children[0];
let trs = tbody.children
for (let i = 0; i < trs.length; i++){
var tdhtml = trs[i].getElementsByTagName('td')[0].innerHTML
trs[i].getElementsByTagName('td')[0].innerHTML ='selected' + tdhtml
}
<table>
<tbody>
<tr>
<td> 1<!--to be selected-->
<div>
<div>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td> 2<!--to be selected-->
<div>
<div>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td> 3 <!-- to be selected-->
<div>
<div>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
You would need to apply a CSS class to the first TD of each row in the highest level table, as follows:
/* Set all root TR's and the first TD element */
table>tbody>tr>td:first-child {
background-color: yellow;
}
/* Reset so that this doesn't cascade */
table>tbody>tr>td:first-child td {
background-color: inherit;
}
Example here:
https://jsfiddle.net/0utqvhy6/
This should be super easy to solve. I have the following code that is not working the way I would like it to. The aim is to have something like this, with the BUTTON on the right of the "1 2 3 4 table":
1 2 BUTTON
3 4
but all I get is almost the same disposition with the button as a 3rd line. What am I missing?
<tr>
<td>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</td>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
If you want to have an inner table, it needs its own set of <table> tags:
<table>
<tr>
<td>
<table>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
</table>
</td>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
</table>
Otherwise, your "inner" trs are actually being treated as a second and third row in your outer table, causing the displacement. The td containing the button appears in a new row after the rows with numbers. The result is a table with missing a <tr> start tag and some unexpected <td>/</td> tags. Here's your original markup re-indented and "fixed" (including the outer <table>/</table> tags that for whatever reason are not shown in the question) to show you what I mean:
<table>
<tr>
<td>
<tr>
<td>1 </td>
<td>2 </td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
</tr>
<tr>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
</table>
Note that <tr> and <td> have optional end tags, which means the markup above is completely valid even though the first tr and td are missing their end tags, and is the reason why your original markup is being treated the way it is.
You should move your button to the first table row. And your HTML is not valid — you can't put <tr> into <td>, only vice versa. From the specification:
Contexts in which this element can be used:
As a child of a thead element.
As a child of a tbody element.
As a child of a tfoot element.
As a child of a table element, after any caption, colgroup, and thead elements, but only if there are no tbody elements that are children of the table element.
Check out my snippet:
td {
padding: 5px 20px;
}
<table>
<tr>
<td>1 </td>
<td>2 </td>
<td>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
</td>
</tr>
<tr>
<td>3 </td>
<td>4 </td>
<td></td>
</tr>
</table>
You have included eveything inside one <tr> tag. You need 2 separate <tr> tags, i.e, 2 rows and button should be outside the <table> tag.
Then using CSS you need to set the display of both table and button to inline-block and then using position property of CSS, you can position button to the desired position.
As you also want some space between two columns of the table, you can use to add some space between two columns of your table.
To add some space between table and button, add some padding to the left side of the button.
.but {
display: inline-block;
position: relative;
top: -30px;
padding-left: 40px;
}
table {
display: inline-block;
}
<table>
<tr>
<td>1</td>
<td> </td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td>4</td>
</tr>
</table>
<div class="but">
<input type="button" class="button" value="BUTTON" />
</div>
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I want the whole row to change background-color on hover. The HTML is really old and I must leave it as it is. So I need this done purely in CSS. No JavaScript nor JQuery. Once I hover on .GMDataRow td I also need to trigger (change background) on the same element in another td. The order of elements is same in both td's.
Here's the smaller skeleton of code so you understand what im talking about:
<table>
<tr>
<td>code here</td>
<td>code here</td>
</tr>
</table>
Those two tds have identical children elements and the most important, they have same <tr class="GMDataRow">. So I was thinking maybe it can be done with :nth-child(). I need your suggestions
JSFiddle:
And here's the real skeleton:
<table class="GMMainTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="GMBodyLeft">
<table>
<tr class="GMDataRow" >
<td>
xxx
</td>
</tr>
<tr class="GMDataRow">
<td>
xxx
</td>
</tr>
</table>
</div>
</td>
<td>
<div class="GMBodyMid">
<table>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
<tr class="GMDataRow">
<td>
yyy
</td>
<td>
yyy
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
try this :
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px; border:#4e95f4 1px solid;
}
.hoverTable tr{
background: #b8d1f3;
}
.hoverTable tr:hover {
background-color: #ffff99;
}
<table class="hoverTable">
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
</table>
How to apply CSS to td of one particular table; excluding all other tables in web page?
<table class="pure-table fullWidth" id="ToBeApplied">
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
<table class="pure-table fullWidth" id="NotToBeApplied">
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
I want to apply CSS say
td {padding:23px;font-weight:bold}
i want to apply it on td's of table having ID ''ToBeApplied''.
I do not want to write a class and write same on each td of table
I do not want it to apply on td's of second table have ID ''NotToBeApplied''
How to modify HTML and CSS to achieve above?
Use CSS selectors like,
#ToBeApplied td {padding:23px;font-weight:bold}
This should work (Assuming that you dont want to specify id for table)
table.pure-table:first-child td {padding:23px;font-weight:bold}
DEMO
This is what you want.
Check out this fiddle.
#ToBeApplied td {
padding:23px;
font-weight:bold
}
Here is the snippet.
#ToBeApplied td {
padding: 23px;
font-weight: bold
}
<table class="pure-table fullWidth" id="ToBeApplied">
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
<table class="pure-table fullWidth" id="NotToBeApplied">
<tbody>
<tr class="pure-table-odd">
<td>
<label>Bank</label>
</td>
<td>
<label>Japha Bank</label>
</td>
</tr>
</tbody>
</table>
Just add style below:
<style type="text/css">
#ToBeApplied tr td{padding:23px;font-weight:bold}
</style>
One can limit the CSS application using the parent ahead of the style..
I hope this will help you achieve what you need!
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/