I have a JSF app and I generate <table>s dynamically based on some data.
For each cell I dynamically generate the css class and I write all the classes in the *.jsf File (using ResponseWriter)
A simplified resulting page:
<div id="styles">
<style type="text/css">
cell1 {
color: red;
}
cell2 {
color: blue;
}
cell3 {
color: black;
}
cell4 {
color: green;
}
</style>
</div>
<table style="width:100%">
<tr>
<td class="cell1">Jill</td>
<td class="cell2">Smith</td>
</tr>
<tr>
<td class="cell3">Eve</td>
<td class="cell4">Jackson</td>
</tr>
</table>
The table can be very big and it is possible for cells to share the same style.
The cell styles can change based on some user input in the table. I can update the cell on ajax request overriding UIComponent.visitTree(VisitContext context, VisitCallback callback)
but I have no idea if and how I can add additional css classes.
I think I have found a solution: inside UIComponent.visitTree(VisitContext context, VisitCallback callback) I can rewrite the cell (<td>) and add the <style type="text/css"> tag as child of the <td> tag adding the new CSS classes to it.
Related
I've got a table
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
I'm trying to set the table striping to use nth-child selectors but just can't seem to crack it.
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #FFF;
}
I'm pretty sure I'm close ... can't quite seem to crack it.
anyone pass along a clue?
Here's as close as you're going to get. Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
Here are the fixes that I made:
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
There's no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you're just adding extra code by adding the table in.
#mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
Now, [#display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do.
#mytable tr:nth-child(odd) {
background-color: #000;
}
And there you have it.
If you are using JQuery to change the visibility of rows you can apply the following function to the table to add an .odd class where appropriate. Call it each time the rows visible is different.
function updateStriping(jquerySelector){
$(jquerySelector).each(function(index, row){
$(row).removeClass('odd');
if (index%2==1){ //odd row
$(row).addClass('odd');
}
});
}
And for the css simply do
table#tableid tr.visible.odd{
background-color: #EFF3FE;
}
While you can't Zebra stripe a table with hidden rows using CSS3 you can do it with JavaScript. Here is how:
var table = document.getElementById("mytable");
var k = 0;
for (var j = 0, row; row = table.rows[j]; j++) {
if (!(row.style.display === "none")) {
if (k % 2) {
row.style.backgroundColor = "rgba(242,252,244,0.4)";
} else {
row.style.backgroundColor = "rgba(0,0,0,0.0)";
}
k++;
}
}
For a jquery way, you could use this function which iterates through the rows in your table, checking the visbility of the row and (re)setting a class for visible odd rows.
function updateStriping(jquerySelector) {
var count = 0;
$(jquerySelector).each(function (index, row) {
$(row).removeClass('odd');
if ($(row).is(":visible")) {
if (count % 2 == 1) { //odd row
$(row).addClass('odd');
}
count++;
}
});
}
Use css to set a background for odd rows.
#mytable tr.odd { background: rgba(0,0,0,.1); }
Then you can call this zebra-striper whenever by using:
updateStriping("#mytable tr");
I came up with a sort of solution but it's reliant on the fact that the table can only ever have a maximum number of hidden rows and comes with the downside of requiring 2 additional CSS rules for each possible hidden row. The principle is that, after each hidden row, you switch the background-color of the odd and even rows around.
Here's a quick example with just 3 hidden rows and the necessary CSS for up to 4 of them. You can already see how unwieldy the CSS can become but, still, someone may find some use for it:
table{
background:#fff;
border:1px solid #000;
border-spacing:1px;
width:100%;
}
td{
padding:20px;
}
tr:nth-child(odd)>td{
background:#999;
}
tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]{
display:none;
}
tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
<table>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
in jquery ..
var odd = true;
$('table tr:visible').each(function() {
$(this).removeClass('odd even').addClass(odd?'odd':'even');
odd=!odd
});
You can easily fake the zebra stripes if you apply a vertically repeating gradient on the parent table, positioned exactly to match the rows' height (the rows would have to be transparent). That way the table won't care if anything's hidden, it will repeat no matter what.
If anyone tries to do something like me, where I have alternating hidden and visible rows, you can do this:
.table-striped tbody tr:nth-child(4n + 1) {
background-color: rgba(0,0,0,.05);
}
This will get every 4th element starting with the 1st one, and allows you to maintain striping with hidden rows between each visible row.
Here is a 2022 version of a javascript version
let cnt = 0;
document.querySelectorAll("#mytable tbody tr").forEach(tr => {
cnt += tr.hidden ? 0 : 1;
tr.classList.toggle("odd",cnt%2===0);
});
.odd { background-color: grey; }
<table id="mytable">
<thead><tr><th>Num</th></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr hidden><td></td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</tbody>
</table>
I add in css:
tr[style="display: table-row;"]:nth-child(even) {
background-color: #f3f6fa;
}
and on create tr add in tag
style="display: table-row;"
Jquery codes for zebra color in html table
$("#mytabletr:odd").addClass('oddRow');
$("#mytabletr:even").addClass('evenEven');
And CSS you can do
.oddRow{background:#E3E5E6;color:black}
.evenRow{background:#FFFFFF;color:black}
I can style a table in react via:
var tableStyle = {
"border": "1px solid black"
};
return (
<div>
<h1>My Awesome Table</h1>
<table style={tableStyle}>
<th>Awesome Header</th>
Coupling my style and html into a reusable component is the react way of doing things. How can I effectively style my whole table? I could style each header via:
<th style={headerStyle}>
<th style={headerStyle}>
<th style={headerStyle}>
and
<tr style={rowStyle}>
<tr style={rowStyle}>
That's not very efficient. In plain old CSS I can just do
table {
//boom style all the things
}
th {
}
tr {
}
Using CSS, particularly in a SPA application can become a maintenance headache. So I like the idea of sticking my style into this component where nobody else will inherit it. How can I do it without writing a bunch of repetitive code?
Not entirely sure I understand what you're looking for, but you want a better way of having css and markup in one file with no external dependencies?
If so, this might work:
return (
<style>{`
table{
border:1px solid black;
}
`}</style>
<div>
<h1>My Awesome Table</h1>
<table>
<th>Awesome Header</th>
...
)
Using template literal string formatting seems necessary here to support the <style> contents to span across multiple lines.
Alternatively:
<style>{"table{border:1px solid black;}"}</style>
You should have all of your styles in a separate folder/ and file and maintain separation of concerns. No CSS declarations should be in your JavaScript. If must style your components, you should be using CSS classes instead of inline-styles.
Then you could style all of your tables from one CSS file.
/*CSS file*/
table.myAwesomeTable {
...code
}
/*Markup */
<table className="myAwesomeTable">
</table>
define style in your global theme.js
"table, th, td" :{
border: "1px solid white" },
"th, td" : {
textAlign: "center"
},
All tables in App will now display white border
If I want to treat the properties of a table imbedded in a cell differently than the outer table, what is required. I am new to CSS and do not have a handle on the cascading effect. A boiled downed example of my attempt is as follows:
<body>
<table><link rel="stylesheet" type="text/css" href="OuterTable.css">
<tr><th>Col1</th><th>Col2</th></tr>
<tr>
<td>
<table><link rel="stylesheet" type="text/css" href="InnerTable.css"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
</td>
<td>
<table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
</td>
</tr>
</table>
</b
Where the OuterTable.css specifies a pink background for the cells and InnerTable.css specifies yellow for the cells. Obviosuly, I am missing something basic as all header styles have a yellow background. What is the best method for styling an internal table.
a) Add class(inner and outer as shown below) to your table
b) remove your CSS file from table and add to head
c) just add the below style statements to your css.
<style type="text/css">
table.outer {
background-color:yellow
}
table.outer th {
// add style properties here
}
table.inner {
background-color:pink
}
table.inner th {
// add style properties here
}
</style>
<table class="outer">
<tr><th>Col1</th><th>Col2</th></tr>
<tr>
<td>
<table class="inner"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
</td>
<td>
<table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
</td>
</tr>
</table>
First, don't import CSS at the middle of your HTML code, put it on the <head> tag please.
You can style your HTML elements by "id" or "class", I'll make and example using class, check it:
<head>
<link rel="stylesheet" type="text/css" href="OuterTable.css">
<link rel="stylesheet" type="text/css" href="InnerTable.css">
<style>
.outerTable{
background-color:#FF0000;
}
.innerTable{
background-color:#FF00FF;
}
</style>
</head>
<body>
<table class="outerTable">
<tr><th>Col1</th><th>Col2</th></tr>
<tr>
<td>
<table class="innerTable"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
</td>
<td>
<table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
</td>
</tr>
</table>
</body>
Instead the class at <style> tag, you put your code at your .css files
see it working at: http://jsfiddle.net/U5cUK/
First off, all CSS files should be included in the <head> of your HTML document.
Now, if you want to target a nested table, all you have to do is use a descendant selector like this:
/*Define default color for cells*/
table th{
background-color: pink;
}
/*Override for headers inside a nested table*/
table table th{
background-color: yellow;
}
No need for a separate CSS file or custom classes or ids
See Demo fiddle
The selectOneRadio element in JSF is translated to a table, where the radio button and its label are put within the same <td> in a table.
<!-- JSF Element -->
<h:selectOneRadio id="types" label="Type"
value="#{bean.selectedType}"
layout="pageDirection">
<f:selectItems value="#{bean.types}"/>
</h:selectOneRadio>
<!-- Generated HTML -->
<table id="j_id_i:types">
<tbody>
<tr>
<td>
<input id="j_id_i:types:0" type="radio" value="VALUE1"
name="j_id_i:types"/>
<label for="j_id_i:types:0"> Value #1</label>
</td>
</tr>
<tr>...</tr>
...
</tbody>
</table>
Before I was using Bootstrap, the elements within the <td> would appear side by side, but now look under each other.
The processed CSS for the element is the following, as given by Firebug.
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
color: #333333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
}
html {
font-size: 100%;
}
I have no clue what may be producing such behaviour. It's not a concern of width, as this is the single element within the <div>, and without bootstrap it is rendering side by side.
That's because the <label> has due to the Bootstrap CSS become a HTML block element which starts naturally at a new line.
You need to make it a HTML inline element again. So, you need to override the Bootstrap CSS accordingly. Perhaps you want to apply this for labels in table cells only. E.g.
td label {
display: inline;
}
I've got a table
<table id="mytable">
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr style="display: none;"><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
I'm trying to set the table striping to use nth-child selectors but just can't seem to crack it.
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #FFF;
}
I'm pretty sure I'm close ... can't quite seem to crack it.
anyone pass along a clue?
Here's as close as you're going to get. Note that you can't make the nth-child count only displayed rows; nth-child will take the nth child element no matter what, not the nth child that matches a given selector. If you want some rows to be missing and not affect the zebra-striping, you will have to remove them from the table entirely, either through the DOM or on the server side.
#mytable tr:nth-child(odd) {
background-color: #000;
}
#mytable tr:nth-child(even) {
background-color: #FFF;
}
<table id="mytable">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
Here are the fixes that I made:
table #mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
There's no need to specify an ancestor selector for an id based selector; there is only ever one element that will match #table, so you're just adding extra code by adding the table in.
#mytable tr[#display=block]:nth-child(odd) {
background-color: #000;
}
Now, [#display=block] would match elements which had an attribute display set to block, such as <tr display=block>. Display isn't a valid HTML attribute; what you seem to be trying to do is to have the selector match on the style of the element, but you can't do that in CSS, since the browser needs to apply the styles from the CSS before it can figure that out, which it's in the process of doing when it's applying this selector. So, you won't be able to select on whether table rows are displayed. Since nth-child can only take the nth child no matter what, not nth with some attribute, we're going to have to give up on this part of the CSS. There is also nth-of-type, which selects the nth child of the same element type, but that's all you can do.
#mytable tr:nth-child(odd) {
background-color: #000;
}
And there you have it.
If you are using JQuery to change the visibility of rows you can apply the following function to the table to add an .odd class where appropriate. Call it each time the rows visible is different.
function updateStriping(jquerySelector){
$(jquerySelector).each(function(index, row){
$(row).removeClass('odd');
if (index%2==1){ //odd row
$(row).addClass('odd');
}
});
}
And for the css simply do
table#tableid tr.visible.odd{
background-color: #EFF3FE;
}
While you can't Zebra stripe a table with hidden rows using CSS3 you can do it with JavaScript. Here is how:
var table = document.getElementById("mytable");
var k = 0;
for (var j = 0, row; row = table.rows[j]; j++) {
if (!(row.style.display === "none")) {
if (k % 2) {
row.style.backgroundColor = "rgba(242,252,244,0.4)";
} else {
row.style.backgroundColor = "rgba(0,0,0,0.0)";
}
k++;
}
}
For a jquery way, you could use this function which iterates through the rows in your table, checking the visbility of the row and (re)setting a class for visible odd rows.
function updateStriping(jquerySelector) {
var count = 0;
$(jquerySelector).each(function (index, row) {
$(row).removeClass('odd');
if ($(row).is(":visible")) {
if (count % 2 == 1) { //odd row
$(row).addClass('odd');
}
count++;
}
});
}
Use css to set a background for odd rows.
#mytable tr.odd { background: rgba(0,0,0,.1); }
Then you can call this zebra-striper whenever by using:
updateStriping("#mytable tr");
I came up with a sort of solution but it's reliant on the fact that the table can only ever have a maximum number of hidden rows and comes with the downside of requiring 2 additional CSS rules for each possible hidden row. The principle is that, after each hidden row, you switch the background-color of the odd and even rows around.
Here's a quick example with just 3 hidden rows and the necessary CSS for up to 4 of them. You can already see how unwieldy the CSS can become but, still, someone may find some use for it:
table{
background:#fff;
border:1px solid #000;
border-spacing:1px;
width:100%;
}
td{
padding:20px;
}
tr:nth-child(odd)>td{
background:#999;
}
tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]{
display:none;
}
tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#000;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(odd)>td{
background:#999;
}
tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr[data-hidden=true]~tr:nth-child(even)>td{
background:#000;
}
<table>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr data-hidden="true"><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
</table>
in jquery ..
var odd = true;
$('table tr:visible').each(function() {
$(this).removeClass('odd even').addClass(odd?'odd':'even');
odd=!odd
});
You can easily fake the zebra stripes if you apply a vertically repeating gradient on the parent table, positioned exactly to match the rows' height (the rows would have to be transparent). That way the table won't care if anything's hidden, it will repeat no matter what.
If anyone tries to do something like me, where I have alternating hidden and visible rows, you can do this:
.table-striped tbody tr:nth-child(4n + 1) {
background-color: rgba(0,0,0,.05);
}
This will get every 4th element starting with the 1st one, and allows you to maintain striping with hidden rows between each visible row.
Here is a 2022 version of a javascript version
let cnt = 0;
document.querySelectorAll("#mytable tbody tr").forEach(tr => {
cnt += tr.hidden ? 0 : 1;
tr.classList.toggle("odd",cnt%2===0);
});
.odd { background-color: grey; }
<table id="mytable">
<thead><tr><th>Num</th></tr></thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr hidden><td></td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</tbody>
</table>
I add in css:
tr[style="display: table-row;"]:nth-child(even) {
background-color: #f3f6fa;
}
and on create tr add in tag
style="display: table-row;"
Jquery codes for zebra color in html table
$("#mytabletr:odd").addClass('oddRow');
$("#mytabletr:even").addClass('evenEven');
And CSS you can do
.oddRow{background:#E3E5E6;color:black}
.evenRow{background:#FFFFFF;color:black}