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>
Related
I am trying to add an extra table cell to a table, that isn't attached to a column. It just sticks out of the table like a 'bump' I not entirely sure what kind of styling I would need to achieve this.
What I would like it to look like this:
My code:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td style="border-style:none">extra</td>
</tr>
</table>
I would think I need to add an empty <th> and remove the border from it and then add it to the last cells in the table?
I think you want to do like below:
table{
border-collapse: collapse;
border-spacing: 0;
}
table tr td:last-child{
border: none;
}
table td, table th{
border: 1px #666 solid;
}
table tr:last-child td:last-child{
border: 1px #666 solid;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<td></td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td></td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>extra</td>
</tr>
</table>
With javascript, you can do it like (of course you would change nth-child(3) to your target column):
var row = document.createElement('td')
row.innerHTML = 'teste'
document.querySelector('table tr:nth-child(3)').append(row)
<table id="test">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td style="border-style:none">extra</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}
Is it possible to nest a table inside of an existing table, but have the nested table be unrestricted by the parent table's column widths?
In other words, I want to fit a completely independent table inside a row of an existing table. The child table should not have to abide by the parent table's column widths.
Use the colspan attribute to make a cell span multiple columns. You can put the nested table in such a cell. Here's an example of a table of orders that contains order details as a nested table in the following row:
table {
border-collapse: collapse;
font-family: sans-serif;
font-size: 12px;
}
td, th {
text-align: left;
padding: 3px 5px;
border: 1px solid #ccc;
}
<table>
<thead>
<tr>
<th>Order #</th>
<th>Date</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>100781</td>
<td>5/30/2015</td>
<td>$71.00</td>
</tr>
<tr>
<td colspan="3">
Order detail:
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mixed Greens Salad</td>
<td>$7.00</td>
<td>2</td>
<td>$14.00</td>
</tr>
<tr>
<td>Steak</td>
<td>$22.00</td>
<td>1</td>
<td>$22.00</td>
</tr>
<tr>
<td>Salmon</td>
<td>$19.00</td>
<td>1</td>
<td>$19.00</td>
</tr>
<tr>
<td>Chocolate Cake</td>
<td>$8.00</td>
<td>2</td>
<td>$16.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I have a table in HTML which I am applying a CSS class using nth-child to give the rows alternating colors. However there are some sets of rows I would like to be the same color. If I put a tbody around these sets of rows, is there a way to specify in CSS to make rows in that tbody the same color, and then continue alternating colors? The alternative is to manually set row colors which seems like a bit too much of a hack.
So for example:
<table class="alternate-row-colors">
<tr>
<td>Blah blah blah</td>
</tr>
<tbody>
<tr>
<td>Same color as below</td>
</tr>
<tr>
<td>Same color as above</td>
</tr>
</tbody>
<tr>
<td>Continue alternating colors of rows</td>
</tr>
</table>
The only solution I can find is to break each section into separate tbody elements and apply the alternate class to the ones with the required styling.
The rows would not completely alternate as the number of rows would, I presume not be known in advance...but it's close.
.alternate-row-colors tr:nth-child(odd) {
background: #bada55;
}
.alternate-row-colors tr:nth-child(even) {
background: gold;
}
<table>
<TBODY class="alternate-row-colors">
<TR>
<TD>Monday</TD>
<TD>09/11/2000</TD>
<TD>Kelsey</TD>
</TR>
<TR>
<TD>Tuesday</TD>
<TD>09/12/2000</TD>
<TD>Lindsey</TD>
</TR>
<TR>
<TD>Wednesday</TD>
<TD>09/13/2000</TD>
<TD>Randy</TD>
</TR>
<TR>
<TD>Thursday</TD>
<TD>09/14/2000</TD>
<TD>Susan</TD>
</TR>
<TR>
<TD>Friday</TD>
<TD>09/15/2000</TD>
<TD>Randy</TD>
</TR>
<TR>
<TD>Saturday</TD>
<TD>09/16/2000</TD>
<TD>Lindsey</TD>
</TR>
<TR>
<TD>Sunday</TD>
<TD>09/17/2000</TD>
<TD>Susan</TD>
</TR>
</TBODY>
<TBODY>
<TR>
<TD>Monday</TD>
<TD>09/18/2000</TD>
<TD>Melody</TD>
</TR>
<TR>
<TD>Tuesday</TD>
<TD>09/19/2000</TD>
<TD>Christiane</TD>
</TR>
<TR>
<TD>Wednesday</TD>
<TD>09/20/2000</TD>
<TD>Symphony</TD>
</TR>
<TR>
<TD>Thursday</TD>
<TD>09/21/2000</TD>
<TD>Starflower</TD>
</TR>
<TR>
<TD>Friday</TD>
<TD>09/22/2000</TD>
<TD>Miko</TD>
</TR>
<TR>
<TD>Saturday</TD>
<TD>09/23/2000</TD>
<TD>Cleo</TD>
</TR>
<TR>
<TD>Sunday</TD>
<TD>09/24/2000</TD>
<TD>Alyx</TD>
</TR>
</TBODY>
<TBODY class="alternate-row-colors">
<TR>
<TD>Monday</TD>
<TD>09/25/2000</TD>
<TD>Dancing Star</TD>
</TR>
<TR>
<TD>Tuesday</TD>
<TD>09/26/2000</TD>
<TD>Dawn</TD>
</TR>
<TR>
<TD>Wednesday</TD>
<TD>09/27/2000</TD>
<TD>Josh</TD>
</TR>
<TR>
<TD>Thursday</TD>
<TD>09/28/2000</TD>
<TD>Ryan</TD>
</TR>
<TR>
<TD>Friday</TD>
<TD>09/29/2000</TD>
<TD>Mary Kay</TD>
</TR>
<TR>
<TD>Saturday</TD>
<TD>09/30/2000</TD>
<TD>Hallie</TD>
</TR>
<TR>
<TD>Sunday</TD>
<TD>10/01/2000</TD>
<TD>Paul</TD>
</TR>
</TBODY>
</table>
If you are wanting to use the <tbody> type of element to hold the 'same colour' blocks then using the nth-child element is easy using the direct selector > thus:
.alternate-row-colors > tr:nth-child(even) {
background-color: #A4D1FF;
}
.alternate-row-colors > tr:nth-child(odd) {
background-color: #EAF4FF;
}
This will then only effect the tr elements which are direct descendent of the class.
How about
CSS
.alternate-row-colors > tr:nth-child(odd) {
background-color: hsla(0, 0%, 0%, .2);
}
.alternate-row-colors > tr:nth-child(even), .alternate-row-colors-solid {
background-color: hsla(0, 0%, 0%, .4);
}
Or set as a third color
.alternate-row-colors-solid {
background-color: blue;
}
And if you want to group than create a table in a table i suspect is the easiest method.
HTML
<table class="alternate-row-colors">
<tr>
<td>Zebra coloring</td>
</tr>
<tr>
<td>Zebra coloring</td>
</tr>
<tr>
<td>
<table class="alternate-row-colors-solid">
<tr>
<td>Same color</td>
</tr>
<tr>
<td>same color</td>
</tr>
<tr>
<td>same color</td>
</tr>
</table></td>
</tr>
<tr>
<td>Zebra coloring</td>
</tr>
<tr>
<td>Zebra coloring</td>
</tr>
</table>
.alternate-row-colors .alternate-row-colors-solid > tr {
background-color: orange;
}
And than set the second table and its childs with width and height of 100% remove padding, margin and so on so they dont look like a sub table.
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