I am trying to give my table td's a border-bottom apart from the last td. Where am I going wrong?
CSS
.rack {
border-left: 15px solid #959595;
}
.rack td {
border-bottom: 15px solid #f05f28;
width:100%;
}
.rack td:last-child {
border-bottom: none;
}
HTML
<table class="rack" width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
FIDDLE
The problem is you are misunderstanding how the :last-child selector works.
According to MDN:
The :last-child CSS pseudo-class represents any element that is the last child element of its parent.
What you are doing with .rack td:last-child is selecting the <td> that is the last child of it's parent <tr>, meaning all of them.
Simply select the <tr> that is the :last-child(or :last-of-type), then select it's child <td>:
.rack tr:last-child td {
border-bottom: none;
}
JSFiddle Demo
You should replace .rack td:last-child with .rack tr:last-child td. :last-child is applied to the last child relative to its respective parent element, so you want to select the td of the last tr.
Related
I have two css classes in a codebase and I'm unsure why one is being chosen over the other, I thought the specifity of my second one was stronger. Is anyone able to explain?
The CSS class that it's choosing is -
td, th, table { border-collapse: collapse; border: 1px solid #999; }
And the CSS that I want it to use is -
table.cancellation { border: none; }
I thought as the second one had a class selector it would have a stronger specificity, why am I wrong?
You're overwriting the style for the table, but not the cells.
In the first table, everything has a red border.
In the second table, the table has a blue border, but since border-collapse:collapse is set, the red of the td & td appear above it.
In the third table, border-collapse is set to separate and you can see that the table does truly have a blue border.
In the last table, the styles for td and th are also overwritten - giving a borderless table.
th,
td,
table {
border-collapse: collapse;
border: 1px solid red;
margin-bottom:1rem;// just for looks
}
table.table {
border-color: blue
}
table.separate{
border-collapse:separate;
}
table.none,
table.none th,
table.none td{
border:none
}
<table>
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
<table class = "table">
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
<table class = "table separate">
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
<table class = "table none">
<tr>
<th>
Head
</th>
<td>
cell
</td>
</table>
CSS reads from top to bottom
if the class
td, th, table { border-collapse: collapse; border: 1px solid #999; }
is written after
table.cancellation { border: none; }
Then it will take the properties of the one that comes at the very last in your code!
If this isn't the case then you can use "border: none !important" as it has the highest rank among everything else
In case both of these methods don't work then I suggest you show me the bigger picture as in type in your related HTML and complete CSS of the 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:
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>
I have got a table here that Im trying to apply some CSS rules to it.I have got a CSS rule in place to set the border bottom and border top to be in red and green respectively. For some reason border-bottom is not appearing for all TDs but only for the TDs of last TR. Any reason why.
table{
border-collapse:collapse;
}
table td{
border-top:solid 4px green;
border-bottom:solid 2px red;
}
<table width="500px">
<tr>
<td>Computers</td>
<td>£900</td>
</tr>
<tr>
<td>Laptops</td>
<td>£600</td>
</tr>
<tr>
<td>Keyboards</td>
<td>£20</td>
</tr>
<tr>
<td>Hard Drives</td>
<td>£80</td>
</tr>
</table>
The borders are over lapping, the green is on top of the red. To rectify this set border-collapse: separate; instead of border-collapse: collapse;