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> ...
Related
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've got a table with CSS styling that has a blank (e.g. white background) first column, and a second column with alternating rows. The problem, however, is that I need to insert another table into the table that doesn't apply the same logic and just acts like a normal table.
Every time I try, it gets over-ridden by the styling and the table within the table also appears white
Any ideas?
HTML:
<table class="ContentTable1" style="margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="text-align: center; width: 106.5px;">
<p><img src="/knowledgeobject/read?id=149&context=image" data-koid="149" />
</p>
</td>
<td style="width: 1041px;">
<table width="100%">
<tbody>
<tr>
<td style="width: 1%; text-align: center;" width="884">1.</td>
<td width="884">Turn alarm off - If already turned off, check to see if anyone else is in the building</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS
.ContentTable1 td:first-child {
text-align: left;
background-color: #FFFFFF;
}
To target just the first column of the parent table, use the CSS child selector (>):
.ContentTable1 > tbody > tr > td:first-child {
text-align: left;
background-color: #FFFFFF;
}
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:
There aren't any attributes like CellPadding or CellSpacing that will accomplish this for me and when I try to add css to the grid tr's to change the top and bottom margins, they are ignored. How do I add a little bit of spacing between each generated row from the gridview?
Margin doesn't work on table elements, use padding, or like in below sample, set a top and/or bottom border on your tr
table {
border-collapse: collapse;
}
td {
background: gray;
}
tr {
border: 0px solid white;
border-width: 10px 0;
}
<table>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
</table>
You can also achieve this using
border-collapse: separate;
border-spacing: 0 10px;
Snippet
table.grey-theme {
border-collapse: separate;
border-spacing: 0 10px;
margin: 50px;
}
table.grey-theme td {
border: solid #777 1px;
padding: 5px;
}
<table class="grey-theme">
<tr>
<td>Dogs</td>
<td>10</td>
</tr>
<tr>
<td>Cats</td>
<td>20</td>
</tr>
<tr>
<td>Parrots</td>
<td>30</td>
</tr>
</table>
Use it in asp:GridView like
<asp:GridView ID="PetGrid" runat="server" CssClass="grey-theme">
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>