I have a table with alternate row background-color:
tr:nth-child(even) {background: #FFF}
tr:nth-child(odd) {background: #f4f4f4}
The table is comprised of two types of cells, ".main" and ".sub".
I would like the background-color to alternate every other ".main", while all ".sub" rows get the color of the previous ".main".
It would be great if the solution were all CSS, but open to jquery if it's really the best way to go.
Any ideas?
<table>
<tr id='1' class='main'><td></td></tr>
<tr id='2' class='main'><td></td></tr>
<tr id='3' class='main'><td></td></tr>
<tr id='4' class='main'><td></td></tr>
<tr id='5' class='main'><td></td></tr>
<tr id='6' class='sub'><td></td></tr>
<tr id='7' class='main'><td></td></tr>
<tr id='8' class='main'><td></td></tr>
<tr id='9' class='sub'><td></td></tr>
<tr id='10' class='sub'><td></td></tr>
<tr id='11' class='main'><td></td></tr>
</table>
rows 1,3,5,8 should be #f4f4f4
rows 2,4,7,11 should be #fffff
and each .sub row should be the same color as the preceding .main row.
(these tables are dynamically generated, so their placement will vary)
EDIT:
here is the jsfiddle of my failed first attempt with jQuery
http://jsfiddle.net/xjDZm/
I don't think this is possible with pure CSS, as you seem to need to style the odd rows of .main, not odd rows and .main, and :nth-child can not do that (you can't use (tr.main):nth-child(odd), not to mention your requirement with .sub is even more complicate).
So here's a jQuery solution:
$("tr.main").filter(":even").css("background-color","#CCC");//change to #F4F4F4
$("tr.main").filter(":odd").css("background-color","#FFF");
$("tr.sub").each(function(i,e){
$(this).css("background-color",$(this).prev().css("background-color"));
});
http://jsfiddle.net/xjDZm/1/
Sorry that I don't use jQuery, so I'm not sure if there's any better way to code. I just look up the API document to find methods that work.
Related
I am trying to hide this:
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
And this is my attempt:
thead.col-image all {
display: none;
}
^ this didn't work - any idea?
Thanks!
You are calling the wrong element and ALSO 'all' is not a selector;
thead.col-image all {} // is calling e.g. <thead class="col-image">
It should be
thead tr th.col-image.all { display: none; }
thead.col-image all means <all> tags in <thead class='col-image'>
correct css for your code should be
thead .col-image.all {
display: none;
}
https://jsfiddle.net/pb5k4v63/26/
with <th> tag only heading will disappear.
Attach a class for <th>or <td> or <tr> depending on your requirement.
and for that class apply the property
{visibility:hidden} which will not affect alignment of your table.
where as {display:none} can affect the alignment (though it works.)
you can use class for td th or add a span to text you want to hide and add class to it
.hide{
visibility:hidden;
}
<table>
<tr>
<td>hello</td>
<td class="hide">hide me</td>
<td>and also <span class="hide">hide me</span></td>
</tr>
</table>
TL;DR Wrap your <thead>, <th>, etc. within the <table> element. Also make sure you are calling the proper elements in your CSS.
An HTML table is defined with the <table> tag.
So in essence you have the <th>, <thead>, etc. elements operating outside of a <table>, so you are breaking your code because the <th>, <thead>, etc. require the parent <table> element to function properly.
Why you may ask? As stated above a table is defined with the <table> tag, so you do not really have a table on your page.
In conclusion "wrap your tables rows, heads, etc within the <table> element for now on.
Here is the code:
HTML
<table>
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
</table>
CSS
th.col-image.all{
display: none;
}
You can view the code live here: https://jsfiddle.net/W3Develops/nbf17pus/6/
I also added another table in there so you can see how to properly make a table.
Here is a link to Mozilla Developer Network and W3Schools so you can learn more about making tables. Good luck:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
https://www.w3schools.com/html/html_tables.asp
Also you were calling classes for thead when you should have been calling classes for th.
Cheers.
I want to change the width of one of my cell but without to fixed all table cells. Is there any way to change specific <td> without the rule table-fixed
Give the td a class name. Like <TD CLASS="class">cel</TD>
Then in css call it like .class {color:red}
https://jsfiddle.net/tnquk2xt/
You can add a class to the table cell and style it appropriately like so:
CSS
.large {width:150px;}
.small {width: 50px;}
HTML
<table>
<tr>
<td class="small">First</td>
<td class="large">Second</td>
<td class="small">Third</td>
</tr>
</table>
Here is a fiddle: https://jsfiddle.net/mmvbmktn/
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_width
<td width="70%">
It was not really hard to find, they set width of the 2 TDs but it works also with only one TD width.
Use Google !! :3
I appending table dynamically using javascript in html with say 50000 cells.
<table id="dataTable">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
.....
<td>data1</td>
</tr>
..........
<tr>
<td>data1</td>
<td>data2</td>
.....
<td>data1</td>
</tr>
</tbody>
</table>
I'm styling the td with descendant selector as,
#dataTable td{
text-align:right;
border:1px solid #adadad;
padding-right:10px;
}
Another option is to give class to each td using class selector.
<table id="dataTable">
<tbody>
<tr>
<td class="format">data1</td>
<td class="format">data2</td>
.....
<td class="format">data1</td>
</tr>
..........
<tr>
<td class="format">data1</td>
<td class="format">data2</td>
.....
<td class="format">data1</td>
</tr>
</tbody>
</table>
Here we have used format class for styling.
.format{
text-align:right;
border:1px solid #adadad;
padding-right:10px;
}
I'm facing performance issue while rendering the table in browser. Is this because I've used DESCENDANT SELECTOR INSTEAD OF CLASS SELECTOR.
Or Browser is not able handle large data.
About the table performance
Tables can be slow to render mostly due to the dynamic column sizes that need to be calculated and set on every change.
You can solve this by specifying a fixed size for each column, like so:
#dataTable td {
width: 100px; /* Set sizes appropriately */
}
This should make your table more performant
About CSS performance
CSS selects by the last token first, so for example, to execute the following selector:
#dataTable td
CSS will first select ALL td elements and then check if each of them is a descendant of #dataTable. Technically, specifying a class for each cell is faster.
However, this is probably not significant enough to pay for by complicating your overall design.
I recommend reading Efficiently Rendering CSS by CSS-Tricks to get a better idea about CSS and performance.
See this fiddle:
http://jsfiddle.net/uqJHf/
I have set the first column to show up with a red background.
However, the odd/even styling is overriding it. Even with added !important;
Is there any way I can get this fixed? (without having to add classes to the
tr.row_odd td {
background:#efefef;
}
tr.row_even td {
background:green;
}
.col1 { background:red !important; }
<table>
<col class="col1"></col>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>
Firstly, lets deal with the markup. I believe that the <col> should be self-closing as it cannot contain any text or child elements and also it should be wrapped in a <colgroup>. You may even need additional <col> tags for each column (so 4 columns means 4 <col>'s).
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>
Now, having had a little play about with the CSS, it seems it's down to how CSS is applied to columns and <tr>'s. If you remove the styles pertaining to the <tr>'s you will see that the style is applied correctly.
So from this i have concluded that the styles are applied in a layered approach, probably because of the columns being a kind of meta detail of tables. An easy way to imagine this is that the <tr> tags are layered on top of the column, and because you've defined a background-color for the <tr> the column styling does not show through - due to the colour being opaque. If you set the <tr>'s background-color to an RGBA value you will see that the columns colour "shines through".
See the modification of your fiddle, for demonstration: http://jsfiddle.net/uqJHf/4/
Hope that helps, it certainly helped me because i've learnt something new here myself during my investigation.
EDIT: seems that IE9 doesn't agree with what i said, it doesn't seem to apply the RGBA value to the <tr> if the <col> has a background-color set. Works in firefox 7 though...
td:first-child
{
background:red !important;
}
The Class from HTML <col> does not get inherited by <td>. You need to adh´just the HTML. Give class col1 to first <td> in table row
http://jsfiddle.net/uqJHf/6/
--
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tbody>
<tr class="row_odd">
<td class="col1">test</td>
<td>test</td>
</tr>
<tr class="row_even">
<td class="col1">test</td>
<td>test</td>
</tr>
</tbody>
</table>
I have a table in my HTML page and I want set different style for header, even and odd rows in table.
My page write with JSP , struts and HTML and use "iterator" in struts to create table rows.
Is it possible to do this?
In your loop for generating the table, alternate a class for the <tr> tag..
e.g.
<tr class="odd">
<tr class="even">
<tr class="odd">
etc..
Then in CSS do
tr.odd { background: red; }
td.even { background: blue; }
Thanks everybody!
I found my answer: http://www.vaannila.com/struts-2/struts-2-example/struts-2-iterator-tag-example1.html