I am trying to set the first column of the outer table (tbStudentPreference) with special styles...
But the problem is that it applies not only to the outer table column but also to the table inside the outer table.
I want to apply my style only to the outer container table. Please help.
<style>
#tbStudentPreference td:first-child {
font-weight: bold;
vertical-align: top;
width: 100px;
}
#tbStudentPreference {
vertical-align: top;
padding: 3px;
}
</style>
<table id='tbStudentPreference'>
<tr>
<td>xxxxx
</td>
<td>.....
</td>
</tr>
<tr>
<td>xxxxx
</td>
<td>.....
</td>
</tr>
<tr>
<td colspan='2'>
<table>
<tr>
<td>Inside Table
</td>
<td>.....
</td>
</tr>
<tr>
<td>Inside Table
</td>
<td>.....
</td>
</tr>
</table>
</td>
</tr>
</table>
I am trying to set the first column of the outer table..
You need to negate the inner table.
Also, the browser automatically adds a tbody for you, so it is not enough to use a child combinator on tr directly. You need to override that with a child-combinator on tbody. You then negate the inner table by using the presence of colspan attribute.
So, you select td which is a first-child among those which are not having a colspan attribute, direct descendant of tr which itself is a direct descendant of tbody which itself is direct descendant of your table. Like this:
#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {...
The negation pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/:not
Snippet:
#tbStudentPreference { border: 1px solid gray; border-collapse: collapse; }
#tbStudentPreference td { border: 1px solid gray; }
#tbStudentPreference > tr > td:not([colspan]):first-child {
font-weight: bold; color: red;
}
#tbStudentPreference > tbody > tr > td:not([colspan]):first-child {
font-weight: bold; color: red;
}
<table id='tbStudentPreference'>
<tr><td>xxxxx</td><td>.....</td></tr>
<tr><td>xxxxx</td><td>.....</td></tr>
<tr><td colspan='2'>
<table>
<tr><td>Inside Table</td><td>.....</td></tr>
<tr><td>Inside Table</td><td>.....</td></tr>
</table>
</td></tr>
</table>
Related
I have the following CSS and HTML
.comTable {
width: 95%;
cellpadding: 2px;
margin: auto;
border-collapse: collapse;
}
.comTable td {
text-align: left;
}
.comTable td:first-child {
text-align: right;
width: 25%;
}
<table id="tableMain" class="comTable">
<tr>
<td>
Some texts 1
</td>
<td>
<table id="table2">
<tr>
<td>
Some more texts
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some texts 2
</td>
<td>
<table id="table3">
<tr>
<td>
Some more texts...
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
The problem is that the comTable CSS class is applied to table2 and table3, such that the first column of table2 and table3 are also set to 25%. How can I make it so that .comTable td:first-child will only apply to tableMain? Please note that I have quite too many rows in tableMain so as much as possible I don't want to apply a class to each first td there.
You can do
.comTable > tr > td:first-child {
text-align: right;
width: 25%;
}
to achieve the desired effect.
> means that only first level children will be affected, and not children deep within.
Use > instead of : e.g. .comTable > tr > td or .comTable > * > td.
To add to Solomon's answer:
you can stack > (child selector) with * (selector for all elements). This way it's possible to grab td from tbody and thead.
.comTable > * > * > td
where html looks like
<table id="tableMain" class="comTable">
<tbody>
<tr>
<td> ...
How do we target the first matching descendant, but not all other descendants further down the tree? e.g.,
if the HTML looks like
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>...</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I've attempted the below, but it doesn't seem to work
.wrapper > table > tbody > tr > td {
...
}
Inherited properties, such as color, would effect the children of the td even if they are not matched by the rule. In this case, 2nd td is a child of the 1st td.
You can reset inherited properties by initial on the children of the matched element. You can also set other properties on any effect children.
Example with color:
.wrapper > table > tbody > tr > td {
color: red;
}
.wrapper > table > tbody > tr > td > * {
color: initial;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
i want to target this td
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>but not this one</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Your css will only target direct td descendants of any direct tr descendants of any direct tbody descendants of any direct table descendants of any .wrapper classed elements.
However, keep in mind that descendants of those tds selected may inherit styles from a parent or at least appear to inherit them.
Below is an example to show that you can style them differently.
.wrapper > table > tbody > tr > td {
background: red;
padding: 4px;
color: white;
}
td {
background: blue;
padding: 10px;
color: yellow;
font-weight: 800;
}
#later-descendant {
background: white;
color: indigo;
padding: 3px;
font-weight: 300;
}
<div class="wrapper">
<table>
<tbody>
<tr>
<!-- i want to target this td -->
<td>
<table>
<tbody>
<tr>
<!-- but not this one -->
<td>yellow</td>
<td id='later-descendant'>indigo</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
I'm trying to change the border-top color of Bootstrap table.
HTML
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
CSS I've tried
table > tr{
border-top: black;
}
table > tr > td{
border: 1px solid red !important;
}
FIDDLE
https://jsfiddle.net/o9b17p2d/43/
As seen in the fiddle.
I'd like to change the color of the line between Parent & Mama.
You have placed a wrong code.Try this
.table td, .table th{
border-color: black;
}
Try this in your css.
thead{
border-bottom: 2px solid #6c5ce7;
}
https://jsfiddle.net/o9b17p2d/45/
I hope it will help
You have used a wrong selector in table > tr > td { and table > tr {
because thead is direct children for table and no tr.
so, change like this:
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
So that you dont effect all other tables in your page/site.
The easiest way to do this - is to give the element an id, and then target it in CSS using the id.
#no-top-border-td {
border-top: none
}
<td id="no-top-border-td">Mama</td>
or you could add that as a style to the actual element
<td style="border-top: none" />
both of these have a high priority when the CSS is applied.
You can also use border-bottom property for row in thead.Add this code in css
.table thead tr td{
border-bottom:1px solid red;
}
with the code below I found I'm confused with the definition of :nth-child
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.
tr:nth-child(2n) {
background-color: gray;
}
table {
margin-left: 20px;
margin-right: 20px;
border-spacing: 0px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
caption {
font-style: italic;
padding-top: 8px;
}
<table>
<caption>content</caption>
<tr>
<th>table head</th>
</tr>
<tr>
<td>111111</td>
</tr>
<tr>
<td>222222</td>
</tr>
<tr>
<td>333333</td>
</tr>
<tr>
<td>444444</td>
</tr>
<tr>
<td>555555</td>
</tr>
<tr>
<td>666666</td>
</tr>
</table>
and the 111111, 333333, 555555 become gray. nothing changed after I delete the caption tag, but 222222, 4444444, 666666 become gray after I removed the tr tag of table title. Isn't :nth-child suppose to count every element of its parent?
The problem here is that your HTML is invalid. tr elements must be wrapped within either a thead, tbody or tfoot element, and most browsers will automatically fix this for you by sticking them in a tbody.
Your HTML on these browsers will actually end up looking like this:
<table>
<caption>...</caption>
<tbody>
<tr>...</tr>
...
</tbody>
</table>
And thus, deleting the <caption> element will have no impact on the positioning of your tr elements.
If you inspect your <table> element, this is what you'll see:
Say for example I have:
<div id="container">
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
And
td { width:10px; height:10px; }
What I want to do is apply a style to the first td, of the first table.
I would have expected:
#container table:first-child td:first-child {
background: red;
}
However it does not work? Please advise!
#container table:first-child tr:first-child td:first-child { background: red; }
Seems to work.
Note that under IE, you will need to have a !DOCTYPE declaration in your html to get support for :first-child. http://www.w3schools.com/cssref/sel_firstchild.asp
To select only the first table within the div:
div#container table:nth-child(1) tr td {
color: #888;
}
To select only the first td of the first table within the div:
div#container table:nth-child(1) tr td:nth-child(1) {
color: #444;
}
For me this works easier if you want to change it to a second table or second tablecell
div#container table:nth-child(2) tr:nth-child(4) td:nth-child(1) {
color: #888;
}