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
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.
Hi I'm having trouble adding inline styling to table components in React. Basically what I'm trying to do is so that the table header/cells are divided equally spacing so I'm adding width: '50%' styling to make this work. I added in the console and it works, but when I return to add it in my code, it doesn't.
I tried adding it to anything just to see if it work and it doesn't. Is there something I'm missing?
What it looks like:
What I want it to look like (after adding width styling to console):
JSX:
<table className="table table-striped">
<thead>
<tr styles={{width: '50%'}}>
<th styles={{width: '50%'}}>Hello</th>
<th styles={{width: '50%'}}>World</th>
</tr>
</thead>
<tbody>
{(data.length == 0)&&
<tr>
<td>I'm</td>
<td>Sam</td>
</tr>
}
</tbody>
</table>
As mentioned in the comments
Change 'styles' to 'style' – cidicles
Usually plural styles is the convention people use when passing a variable to another component, while singular style is the keyword that jsx-html tags will receive to inline the css.
Other answers recommend adding styles to html tags directly in the css. While adding styles on html tags directly without using classes may work it is worth it to note that it may not scale well This will require more work on us to come back and maintain/update the original code.
You can use table-layout: fixed; width: 100% on the table to force equal column widths:
table {
width: 100%;
table-layout: fixed;
}
table tr th {
text-align: left;
background: gray;
color: white;
}
<table className="table table-striped">
<thead>
<tr style={{width: '50%'}}>
<th style={{width: '50%'}}>Hello</th>
<th style={{width: '50%'}}>World</th>
</tr>
</thead>
<tbody
<tr>
<td>I'm</td>
<td>Sam</td>
</tr>
</tbody>
</table>
Your width: 50% isn't working most likely because your parent .table doesn't have a width set. You can try adding width: 100% to the table and then your 50% might work.
EDIT
As other users have mentioned, change styles to style as well.
I've got a table that needs to be striped but it has some rows that may become hidden later on. After hiding some of the rows re-striping does not occur so the striping is off. How can I force the table to re-stripe itself? Here is my css that I feel should work, but it's not. And then also my html.
.isHidden {
display:none;
}
tbody {
tr:not(.isHidden):nth-child(odd) {
background: rgb(238, 238, 238);
}
}
<tbody>
<tr [ngClass]="{'isHidden': !line.get('isVisible').value}" *ngFor="let line of lineDetailsArray.controls; let i=index;">
...
</tr>
</tbody>
At present, you won't be able to solve the problem with CSS only, unfortunately. True, there's a potentially useful addition in the spec - :nth-child(An+B of S). The following example exactly matches your case:
Normally, to zebra-stripe a table’s rows, an author would use CSS
similar to the following:
tr {
background: white;
}
tr:nth-child(even) {
background: silver;
}
However, if some of the rows are hidden and not displayed, this
can break up the pattern, causing multiple adjacent rows to have the
same background color. Assuming that rows are hidden with the [hidden]
attribute in HTML, the following CSS would zebra-stripe the table rows
robustly, maintaining a proper alternating background regardless of
which rows are hidden:
tr {
background: white;
}
tr:nth-child(even of :not([hidden])) {
background: silver;
}
The caveat? Support of this option in browsers is not even limited: it's non-existent.
But still, there's a way out of this misery. Even though Angular won't just let you place ngIf and ngFor on a single element (it'll be way too simple I suppose), there's a workaround - using <ng-container> as a placeholder:
<ng-container *ngFor="let item of list">
<ng-container *ngIf="!item.hidden">
<tr>
<td>{{item.name}}</td>
<td><input type="checkbox"
[checked]="item.hidden"
(change)="item.hidden = !item.hidden" /></td>
</tr>
</ng-container>
</ng-container>
Demo (kudos to #imkremen for helping to create this one).
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.
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.