I have a p:treeTable and the tree contents are all in one column. The tree is a shared component so some of my pages require column header and and some don't. In the pages where the columnHeader is empty, it creates the an empty row for the column header, which I don't want. I do want the column contents, just not the header when there is no column header.
How can I fix this? Any pointers/ideas would be great. Thanks!
You can solved that with custom CSS by setting the thead display attribute to none:
Example:
div[id="testForm:first"] thead {
display:none;
}
if your JSF is similar to this:
<h:form id="testForm">
<p:dataTable id="first">
...
<p:/dataTable>
</h:form>
If your <p:dataTable> uses columns widths like this
<p:dataTable styleClass="myTable">
<p:column width="100">
and you use the following CSS to hide the column headers
.myTable thead {
display:none;
}
you will also lose the column widths you set
Solution to hide column header and keep column widths
.myTable thead th {
border: none !important;
background: none !important;
}
A more formal solution:
TAG:
<p:treeTable styleClass="tree-table-no-header">
Style:
.tree-table-no-header thead {
display: none;
}
You may find you need to be more specific with your style selector:
div[id$="myTableId"]>div>table>thead { display:none; }
This also eliminates the need to reference your form id. The '$' is a starts with wild card and the '>' says select only direct children. See http://www.w3schools.com/cssref/css_selectors.asp for a really good CSS Selector reference.
Hide header (same as other answers):
.hide-table-header thead {
display: none;
}
... and specify column width:
<p:dataTable styleClass="hide-table-header">
<p:column style="width: 80px">
These won't work with reflow="true" tables.
For me the border:none, background:none suggestion leaves an empty space above the table and hides the left side border of the table as well.
Add this code to your css3 file
** Remove the header from the dataTable**/
.ui-datatable.borderless thead {
display: none;
}
/** Remove the border from the dataTable **/
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
border-style: none;
}
Then call this code from the xhtml file like this :
<p:dataTable styleClass="borderless">
Related
I want to align: center the "select all" checkbox in the header. It is the first cell in the header of jqgrid.
I tried:
#configDiv th input[type="checkbox"] {
margin: 0 auto !important;
}
and
grid.find('th input[type="checkbox"]').css("align", "center");
Those didn't work!
Any idea?
Thanks to this answer from Oleg I found this;
grid.closest('div.ui-jqgrid-view').find('table.ui-jqgrid-htable th:first-child').css("text-align", "center");
Inputs, such as checkboxes, are inline elements and you can't centre them directly. You need to centre the "text" (I know a checkbox isn't text, but that is what the CSS rule is) in the parent element, in this case the th.
You can do that with the following code in your CSS;
#configDiv th {
text-align: center;
}
If you need to target the particular th then you should add a class to the HTML and use the th.classname selector.
Hope this helps.
I use following css in my table:
.lh1 {
line-height: 50px;
}
And my table looks like this:
<table class="table table-bordered lh lh1">
..
..
..
</table>
But no matter which value I use for line-height, my table doesn't change at all. Other .css in this table is working fine.
What could be the cause of that problem?
You need to do it like this.
CSS
.lh1 > tbody > tr > td {
line-height: 50px;
}
your CSS is not overwriting the bootstrap CSS. Here is the demo
try with:
.lh1 {
line-height: 50px !important;
}
Your bootstrap may override this
I want to show datatable rows with different colors.
I am using rowStyleClass attribute.
But It is not changing the colors
My code in datatable is,
rowStyleClass="highlight";
and my css file is looks like this,
.highlight {
background: yellow !important ;
}
You should have like two classes with different colors and use, in the rowStyleClass attribute, inline if:
rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'highlight1' : 'highlight2'}"
Where "rowIndex" you should set in the datatable rowIndexVar attribute
rowIndexVar="rowIndex"
That means that even rows will have row style class set as 'highlight1' and odd rows - 'highlight2'
See here more info
The easiest way is to implement .ui-datatable-odd and .ui-datatable-even style classes in your CSS, which are implemented by p:dataTable by default. Example:
.ui-datatable-odd {
background: #ffffff;
}
.ui-datatable-even {
background: #F2F5F9;
}
Ends up looking something like
It could be you need to use more specific selectors, read about css specificity for that
Try this...It is working in my case
.ui-widget-content .ui-datatable-even{
background: #F2F5F9;
}
.ui-widget-content .ui-datatable-odd{
background: red;
}
Tudor's answer is the correct way. In case you use treeTable you can do it this way:
.ui-treetable tbody tr:nth-child(odd) {
background-color: #edf2f6 !important;
}
.ui-treetable tbody tr:nth-child(even) {
background-color: #ffffff !important;
}
I have a table in html, containing this structured data:
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
...
</table>
This is a long list. I would like to be able to but each n+1-th row next to the n th row, like this:
<table>
<tr><td>label1</td><td>value1</td></tr><tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr><tr><td>label4</td><td>value4</td></tr>
...
</table>
So the structure stays the same, but the CSS layout would take care of putting each second row on the right, so the users sees 2 columns of (field, value) in one row.
Any hints?
UPDATE:
This trick will do it, but destroys the table-layout, so not usable.
TABLE TR
{
float:left;
}
TABLE TR:nth-child(2n+1)
{
float:left;
clear:both;
}
Try out and let know is that you want?
Your Html
<table>
<tr><td>label1</td><td>value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
<tr><td>label3</td><td>value3</td></tr>
<tr><td>label4</td><td>value4</td></tr>
<!-- more stuff here -->
</table>
CSS:
tr {
float: left;
}
tr:nth-child(2n+1) {
clear: left;
padding-right: 10px; /* You can edit this line and add as per your style */
}
Works fine in Chrome, Safari, Firefox. Not checked in IE
Example
All,
I have an ASP.NET GridView that is rendered to an HTML table.
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr><td>Data 1</td><td>Data 2</td></tr>
<tr><td>Data 3</td><td>Data 4</td></tr>
</table>
I want to highlight the row when the mouse is hovered over it - except for the first row which is the header.
I am just getting my head wet with JQuery, and have dabbled a bit with CSS (either CSS2 or CSS3). Is there a preferred way to do this?
Can anyone give me a starting point for this?
Cheers
Andez
There is a way to achieve the desired behavior without class-ing each row separately. Here's how to highlight each table row except for first one (header) on hover using the CSS :not and :first-child selectors:
tr:not(:first-child):hover {
background-color: red;
}
Unfortunately, IE < 9 does not support :not, so to do this in a cross-browser way, you can use something like this:
tr:hover {
background-color: red;
}
tr:first-child:hover {
background-color: white;
}
Basically, the first CSS rule includes all rows. To avoid highlighting the first row, you override the its hover style by selecting with tr:first-child and then keeping its background-color to white (or whatever the non-highlighted row's color is).
I hope that helped, too!
To expand on user2458978's answer surely the best way of doing this is to code up the tables correctly.
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
</table>
Then the CSS is simply
table tbody tr:hover { background-color: red; }
Here's a jsFiddle example
You can do this using the CSS :hover specifier. Here's a demonstration:
<table>
<tr><th>Col 1 Head</th><th>Col 2 Head</th></tr>
<tr class = "notfirst"><td>Data 1</td><td>Data 2</td></tr>
<tr class = "notfirst"><td>Data 3</td><td>Data 4</td></tr>
</table>
CSS:
.notfirst:hover {
background-color: red;
}
1. Place header tr inside thead tag
2. Place other tr inside tbody tag
3. Use following css
table tr:not(thead):hover {
background-color: #B0E2FF;
}
Use TH tag for first row and do that:
th {
background-color:#fff;
}
For all others rows:
tr:not(:first-child):hover {
background-color:#eee;
}
or
tr:hover td {
background-color:#eee;
}
Use jQuery to add a class to the parent element of the td (wont select th)
$('td').hover(function(){
$(this).parent().addClass('highlight');
}, function() {
$(this).parent().removeClass('highlight');
});
Then add the CSS class
.highlight {
background:red;
}
Why not simply use
tr>td:hover {
/* hover effect */
background-color: lightblue;
}
This will only affect table rows with td's inside, not table rows with th's inside.
Works in all browsers. Cheers, guys.
Why not something like:
tr:first-child ~ tr { background-color:#fff; }
As of my requirement, I have to highlight all the even rows except header row.
Hence, this answer might not be suitable to the above question.
Even then, I am giving my answer here with the hope that somebody else can use my answer if they encounter this page in search engine search.
My answer is:
$("#tableName tr:even").not("tr:nth(0)").addClass("highlight");
If your table is standard, you have a table like this:
<table>
<thead>
<tr>
<th>title</th>
</tr>
</thead>
<tbody>
<tr>
<th>cell</th>
</tr>
</tbody>
</table>
so you can use this css code:
table > *:not(thead) tr:hover{
background-color: #f5f5f5;
}