I have this table inside another table, i want to remove the border from the cells of child table(around A and B).
Below is the source code for this.
<style>
.withBorders tr td{
border: 1px solid black !important ;
}
.withBorders table.withoutBorders tr td {
border:0px
}
</style>
<table class="withBorders">
<tr>
<td>
<table class="withoutBorders">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
The problem is this isn't working, i have tried many changes with child table's css selector but i am unable to override parent table css property.
Could someone please advice on this?
Note: I can not make any changes to the parent table css selector.
.withBorders tr td{
border: 1px solid black;
}
.withBorders tr td table tr td {
border:none;
}
<table class="withBorders">
<tr>
<td>
<table class="withoutBorders">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
repeat what you typed, don't change your typing like this
.withBorders table.withoutBorders tr td {
border:0px
}
avaoid !important in your css. it's not good.
You can easily use the code like this:
.withBorders tr td{
border: 1px solid black;
}
.withBorders table.withoutBorders tr td {
border:0px
}
<table class="withBorders">
<tr>
<td>
<table class="withoutBorders">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
"!important" means that if it is some choice between 2 styles, it will be choosen the style with higher priority. (the style which contains "!important")
Related
I have a table with a thead and a tbody. I add a border-bottom to the thead and a background-color on the td in the tbody there seems to be some bleed in. This only happends in firefox :
Requirements :
It needs to look exactly the same in chrome firefox
You can't use empty cells
border-collapse cannot be changed
table {
border-collapse:collapse;
font-size:20px;
}
thead {
border-bottom:20px solid green;
}
thead td {
border-right :2px solid blue;
}
tbody td {
background-color:red;
}
<table>
<thead>
<tr>
<td rowspan="2">lorem</td>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">lorem</td>
</tr>
</tbody>
</table>
The bug seems to be related by the fact that the td's in the first tr in the tbody, don't share the same borders as the td's in the last tr in the thead. This is happening because of the colspan="4".
A way to circumvent this issue is to put in a tr at the top of the tbody, that no-one can see ( because it has no height ).
table {
border-collapse:collapse;
font-size:20px;
}
thead {
border-bottom:20px solid green;
}
thead td {
border-right :2px solid blue;
}
tbody td {
background-color:red;
}
tbody>tr:first-child{
height: 0px;
}
<table>
<thead>
<tr>
<td rowspan="2">lorem</td>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">lorem</td>
</tr>
</tbody>
</table>
Or maybe.. this alternative where I removed the bottom-border, but replaced it by a green row.
table {
border-collapse:collapse;
font-size:20px;
}
thead td {
border-right :2px solid blue;
}
tbody td {
background-color:red;
}
th:last-child{
height: 20px;
background-color:green;
}
<table>
<thead>
<tr>
<td rowspan="2">lorem</td>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<td>lorem</td>
<td>lorem</td>
<td>lorem</td>
</tr>
<tr>
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">lorem</td>
</tr>
</tbody>
</table>
PS: You should use th instead of td in headers
This question already has answers here:
Why doesn't table > tr > td work when using the child selector?
(2 answers)
Closed 5 years ago.
I have searched and searched, but can't seem to figure out why this is not working.
Goal: set the background color to red for the first td in the first table, while not setting any background colors for the second table.
#table1 > tr > td:nth-child(1)
{
background-color: red;
}
/*Ignore this*/
table td{
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
<table id='table1'>
<tr>
<td>1</td>
<td>2
<table>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
</table>
#table1>tbody>tr>td:first-child
{
background-color: red;
}
table td{
padding: 10px;
}
<table id='table1' border=1>
<tbody>
<tr>
<td>1</td>
<td>2
<table border=1>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Adding <tbody> fixed it (Thanks Mike!)
#table1 > tbody > tr > td:nth-child(1)
{
background-color: red;
}
/*Ignore this*/
table td{
padding: 10px;
border: 1px solid black;
border-collapse: collapse;
}
<table id='table1'>
<tbody>
<tr>
<td>1</td>
<td>2
<table>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I found how I can hide a table column in this thread:
<style>
table tr th:nth-child(4){ display:none; }
table tr td:nth-child(4){ display:none; }
</style>
However, this doesn't seem to work correctly when I use colspan and rowspan attributes. On this table the content of some cells is missing, as is the right border.
Notice that the content and right border are missing each time the row starts with a rowspan.
How can I hide table columns correctly when I use colspan and rowspan attributes?
Try using nth-child for tr also
I hope it will solve your problem.
<style>
table tr:nth-child(4) th:nth-child(1){ display:none; }
table tr:nth-child(4) td:nth-child(1){ display:none; }
</style>
Here is the code snippet.
table,th,td{border:1px solid black;}
table.new tr:nth-child(4) td{display:none;}
table.new tr:nth-child(2) td:nth-child(2){display:none;}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<td>Mar</td>
<td >$100</td>
</tr>
<tr>
</table>
<span>table after hiding row/column with rowspan/colspan </span>
<table class="new">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<td>Mar</td>
<td >$100</td>
</tr>
<tr>
</table>
Did you try:
table tr th:nth-child(3), table tr td:nth-child(3){
display: none;
}
No rule knows "n". You need to put a number inside the nth-child() method.
So for your example link I used n = 3
See my simple example:
https://jsfiddle.net/cvaxzvey/
I know this question has been asked many times but I can't figure out the problem anyway, so this is my html:
<table class="UMLTable">
<tr>
<th>Table<th>
</tr>
<tr>
<td>Attribute 1<td>
</tr>
<tr>
<td>Attribute 1<td>
</tr>
<tr>
<td>Attribute 1<td>
</tr>
</tr>
</table>
So why this line does not work:
.UMLTable td:nth-child(even){
background-color:blue;
}
You need to select the nth tr element rather than the child td element.
Your selector should be:
.UMLTable tr:nth-child(even) td {
background-color:blue;
}
The reason your CSS isn't working as expected is because the td elements aren't siblings.
.UMLTable tr:nth-child(even) td {
background-color: blue;
}
<table class="UMLTable">
<tr>
<th>Table
<th>
</tr>
<tr>
<td>Attribute 1
<td>
</tr>
<tr>
<td>Attribute 1
<td>
</tr>
<tr>
<td>Attribute 1
<td>
</tr>
</tr>
</table>
Try to use the tr element instead of td like this:
.UMLTable tr:nth-child(even) td {
background-color:blue;
}
JSFIDDLE DEMO
Is there a way, how to group selectors in CSS?
To be precise lets have table with some content like this.
<table id="my-table">
<thead>
<tr>
<th><div class="my-div1"></div></th>
<th><div class="my-div2"></div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="my-div1"></div></td>
<td><div class="my-div2"></div></td>
</tr>
</tbody>
</table>
And I want to merge these style
#my-table tr > th .my-div1,
#my-table tr > td .my-div1 {
some styles
}
into something like this
#my-table tr > (th, td) .my-div1 {
some styles
}
Does CSS support anything like this?
CSS does not support it by default. Yet there are CSS preprocessors that I'm sure can help you with this.
Just skip over specifying th or td and jump right to the class.
<table id="my-table">
<thead>
<tr>
<th><div class="my-div1">A</div></th>
<th><div class="my-div2">B</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="my-div1">C</div></td>
<td><div class="my-div2">D</div></td>
</tr>
</tbody>
#my-table tr .my-div1 {
color: red;
}
http://jsfiddle.net/gdsbLhb2/