i have a table as follows
<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr></tbody></table>
i want to apply borders to to table whose thead class is info
css currently contains
.bordered td{
border: 1px solid #0060a0 !important;
}
You can do this using a sibling selector
.bordered thead.info + tbody td
This selector targets all td elements within a tbody element which is an adjacent sibling to a thead.info element within a .bordered table. That sounds confusing, so here's a demo:
.bordered thead.info + tbody td {
border: 1px solid #0060a0;
}
<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
A slightly more robust solution, which would be required if the table contained a tfoot element would be to use the more general sibling selector.
.bordered thead.info ~ tbody td {
border: 1px solid #0060a0;
}
<table class="bordered">
<thead class="info">
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>
Related
How to select the th element of table without selecting it's child th? is it possible? is there any selector like so?
here is the demo:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
thead:first-of-type th {
background-color: gray;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
When i add the gray background it added with tables child elements of the too. is there any direct selector to only select the parent level th element?
Thanks in advance.
You need to add one class to the main table. Try this code
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
.parent-table>thead:first-of-type th {
background-color: gray;
}
<table class="parent-table">
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
You can try this:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
table > thead:first-of-type > tr > th {
background-color: gray;
}
table > tbody > tr td table > thead:first-of-type > tr > th{
background-color: white;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
i want to add some style to my html table but can't make a certain selection in css, i want to select every even row except every last column of each one!
i already know how to select every even row usin: ":nth-child(even)" but i can't make it exclude the last column!
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
You can target the tr elements that are even with tr:nth-child(even) followed by excluding the last td td:not(:last-child), the selector becomes tr:nth-child(even) td:not(:last-child)
tr:nth-child(even) td:not(:last-child) {
background-color: #f00;
}
/** only for demo purposes **/
table,
tr,
td {
border: 1px solid #000;
}
td {
padding: 8px;
}
<table>
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>age</td>
<td>country</td>
<td id="rmv"><button>remove</button></td>
</tr>
</table>
I have following example table:
<table id="inputTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mike</td>
</tr>
<tr>
<td>2</td>
<td>eric</td>
</tr>
<tr>
<td>3</td>
<td>jonas</td>
</tr>
</tbody>
</table>
I was wondering how may I be able to select every odd row and 2nd cell within the table?
I came up with this:
#inputTable tbody tr:nth-child(odd) td:nth-child(2){
background-color: red;
}
but it didn't work. Anyone has any solution?
Your CSS did not work because it targets #mainTable but your HTML says id="inputTable".
tr:nth-child(odd) td:nth-child(2){
background-color: red;
}
<table id="inputTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mike</td>
</tr>
<tr>
<td>2</td>
<td>eric</td>
</tr>
<tr>
<td>3</td>
<td>jonas</td>
</tr>
</tbody>
</table>
try to something like this for odd even selection using css.
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
In table I'm using this below CSS for highlight trs and I want to use :not for th
HTML:
<table>
<thead>
<th></th>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
CSS:
table tr:hover {
background-color:#fff;
}
table th:hover {
background-color:none !important;
}
Scope the selector to the tbody, not the thead.
tbody tr:hover {
background-color:#fff;
}
tbody th:hover {
background-color:none !important;
}
HTML:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
http://jsfiddle.net/3bpZX/1/
I want to hide the border for a specific rows of a table.How to do it?
Any Idea?
Sample code is Highly Appreciated.
Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.
In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.
Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.
table, tr, td {
border: 3px solid red;
}
tr.noBorder td {
border: 0;
}
<table>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr class="noBorder">
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
<td>A3</td>
<td>A3</td>
</tr>
</table>
Here's the output as an image:
I use this with good results:
border-style:hidden;
It also works for:
border-right-style:hidden; /*if you want to hide just a border on a cell*/
Example:
<style type="text/css">
table, th, td {
border: 2px solid green;
}
tr.hide_right > td, td.hide_right{
border-right-style:hidden;
}
tr.hide_all > td, td.hide_all{
border-style:hidden;
}
}
</style>
<table>
<tr>
<td class="hide_right">11</td>
<td>12</td>
<td class="hide_all">13</td>
</tr>
<tr class="hide_right">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr class="hide_all">
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
Here is the result:
Add programatically noborder class to specific row to hide it
<style>
.noborder
{
border:none;
}
</style>
<table>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
</tr>
/*no border for this row */
<tr class="noborder">
<td>content1</td>
<td>content2</td>
</tr>
</table>
You can simply add these lines of codes here to hide a row,
Either you can write border:0 or border-style:hidden; border: none or it will happen the same thing
<style type="text/css">
table, th, td {
border: 1px solid;
}
tr.hide_all > td, td.hide_all{
border: 0;
}
}
</style>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr class= hide_all>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
running these lines of codes can solve the problem easily