I use Richfaces and have a rich:datatable with nested rich:tooltip-s.
You can imagine the generated HTML looks like this:
<table style="width: 400px; border: 3px solid #000; caption-side: bottom; border-collapse:collapse;">
<caption align="bottom">Table 1.1: A record of the fur shed annually by Jennifer's dog Shasta</caption>
<thead>
<tr>
<th>Month</th>
<th>Fur Shed (mm)</th>
</tr>
<thead>
<tbody style="background-color: #ff3;">
<tr>
<td>April</td>
<td>20</td>
</tr>
<tr>
<td>May</td>
<td>19</td>
</tr>
<tr>
<td>June</td>
<td>10</td>
</tr>
<tr>
<td>July</td>
<td>6</td>
</tr>
<tr>
<td>August</td>
<td>8</td>
</tr>
<tr>
<td>September</td>
<td>14</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="display:none;">
<script type="text/javascript">
new RichFaces.ui.DataTable("form1:table1:0:j_idt227",{"ajaxEventOptions":{}} )
</script>
</td>
</tr>
The problem with this html is in the 2nd (generated from RF) tbody: td has style="display:none;" and in Google Chrome this causes the bottom border being not shown.
My question is: do you know if it is possible to find a workaround to fix this? Moving the display:none; at tr or tbody level would already be a solution.
Thanks!
You can add a footer to the table (<f:facet name="footer">) which will render under the hidden row but if you don't want to you can use this CSS:
table > tbody > tr:last-child {
border-bottom: 3px solid #000;
}
this will find the last row and add a border at the bottom, of course this will affect every table on your page so you should use some identifiers. Also note that the :last-child selector may not be supported by all browsers (it does work in Chrome).
Other alternative is to wrap the table in a div but you'd need to play a little with the CSS to make it look the way you want.
Related
Notice that 'inverted' means the <tr> now represents a column .
I inverted an HTML table using this CSS code (which I found on internet) :
table {
border-collapse: collapse;
}
tr {
display: block;
float: left;
}
th,
td {
display: block;
border: 1px solid black;
}
<table>
<tr>
<th>name</th>
<th>id</th>
<th>number</th>
</tr>
<tr>
<td>James Bond</td>
<td rowspan="2">1</td>
<td>007</td>
</tr>
<tr>
<td>Lucipher</td>
<td>6</td>
<td>666</td>
</tr>
</table>
The CSS code inverted the table successfully , the problem comes when I try to use rowspan or colspan , it doesn't work . How can I fix it ?
By converting your table to blocks, it's no longer actually a table. I do not believe you will be able to do what you are asking for with this CSS ruleset because rowspan and colspan are table properties.
The best solution is to write your table differently. HTML allows you to write tables with the headers along the side like this:
<table>
<tr>
<th>name</th>
<td>James Bond</td>
<td>Lucipher</td>
</tr>
<tr>
<th>id</th>
<td colspan="2">1</td>
<td>6</td>
</tr>
<tr>
<th>number</th>
<td>007</td>
<td>666</td>
</tr>
</table>
If the problem is related to a SQL query needing to be turned you can dump your data into a matrix of values, then rendering it sideways, or in some cases, there are ways to change your query to do this, but those solutions can be pretty confusing depending on the complexity of your data.
Maybe I am being too picky. I want to put cell padding in some tables but not others, without editing every single td element. I would like to make it html5 compliant, which means not using the cellpadding property of the table. But I would like something equivalent to cellpadding - ie something I can apply to the properties of a whole table, on a table by table basis.
To make it even more complicated, I want collapsed borders, which I think rules out using the cell spacing property. Is there something tricky I can do there?
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
.cell-pad th,.cell-pad td{padding:10px}
</style>
</head>
<body>
<p>Table without cellpadding:</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with cellpadding:</p>
<table cellpadding="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with css:</p>
<table class="cell-pad">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
You can solve these problems using CSS.
table.table-big td {
padding: 10px;
}
table.table-collapse {
border-collapse: collapse;
}
table td {
border: 1px solid #333;
}
<table class="table-big table-collapse">
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
padding on the cell level can be used to create spacing between data and border.
border-collapse on the table can be used to collapse or separate borders.
You can create classes with these styles so you keep direct control on which table gets which styling. In my example the second table did not get any styling.
How to push the second row's td to the right? I know I can simply add one more empty td but I want to produce cleaner markup. Is there any css attribute to avoid that?
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>$100</td>
</tr>
</table>
You can do that with a pseudo element, like this, CSS only, no change in the markup
What happens here is that when the pseudo renders it will render as an anonymous table cell, hence push the existing one to the right in the same way the <td></td> markup would.
table, th, td {
border: 1px solid black;
}
table tr:nth-child(3):before {
content: '';
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>$100</td>
</tr>
</table>
The best way would be to produce the extra <td></td> before the $100 cell. If you insist on not using the extra <td></td>, try <td colspan="2" style="text-align:right;">$100</td>
I want to set style for <td> tag, I am designing table in a page. I want to give different styles for upper and lower cells, is that possible to set <style> which only do work on down side <td> tags.
Please Help.
Yes, you either give a class to lower <td> tags and then inside <style> you can set their style. or you can use this css selector without giving your <td> elements a class.
Here is a representation of what I just said:
<table id="table1">
<tr>
<td>1</td>
<td class="lowertd">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td class="lowertd">2</td>
<td>6</td>
</tr>
</table>
<style>
#table1 tr td:last-child {
background-color: green;
}
.lowertd {
background-color: silver;
}
#table1 tr td:nth-child(1) {
background-color: blue;
}
</style>
For your requirement you need to create a css class and reference it by
<td class="someclass" ........... >
although you want to add this class, only for elements for which you need styling.
and in CSS under <style> , define css attributes. Something like below
<style>
.someclass{
property: value;
.
.
.
}
</style>
Hope this solves your problem.
I got the answer...
Just set the particular rows in any tag like <thead>, <tbody> or <tfoot>
<table id="table1">
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
</table>
then set style
<style>
table thead td
{
border:none;
}
</style>
You can style the first 10 <td> tags differently by using the nth-of-type selector and then setting a style for those elements:
td:nth-child(-n+10) { text-decoration: underline; }
jsfiddle
I have several html tables in my content area of my page. The style is weird because it doesn't start the alternating row color fresh at the start of each table, it carries it on through out the list of tables.
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
White
</tr>
<tr>
Blue
</tr>
<tr>
White
</tr>
</table>
The colour in the rows is a representation of what the css would set as the row background. But I want css to start the alternating again for the next table. So it would be:
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
<table>
<tr>
Blue
</tr>
<tr>
White
</tr>
<tr>
Blue
</tr>
</table>
Does THBODY have anything to do with it?
Thanks,
CSS Code
table { border-collapse:collapse; text-align:center; }
table th, td { border:1px solid #759EC7; padding:3px 7px 2px; }
th { color: #fff;
background-color: #5c87b2; text-align:center; }
tr:nth-child(odd) { background-color: #CEE1F5; }
tr:nth-child(even) { background-color: #fff; }
Update
It may be a bug that has crept in, I've look on the suggested fiddles and it works perfectly so it is just some buggy code somewhere.
You can easily achieve it using combinations of :nth-child() by passing even and odd values. For eg. see this fiddle.
where, the CSS is
body {
background-color: black;
color: red;
}
table tr:nth-child(odd) {
background-color: blue;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
The only problem you have is missing the tag in the table.
It works perfectly if you add it. It shouldnt have anything to do with the tbody tag.
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
<table>
<tr>
<td>Blue</td>
</tr>
<tr>
<td>White</td>
</tr>
<tr>
<td>Blue</td>
</tr>
</table>
here is the fiddle: http://jsfiddle.net/rBwBm/
I think you're doing it using javascript, right ? Probably getting a collection of tr through jquery with $('tr') ? Try using CSS nth-child(odd) and nth-child(even) instead, most modern browsers won't have any problem with that.
The issue I was having was with two <TH> rows, which through off the alternating row colouring. So for example:
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
This would have the Blue start on the Name row and then start alternating. So the first line of the table body would be Blue
<tr>
<th>Name</th>
</tr>
This would have the Blue start on the Name row like before and then start alternating, However, the first line of the table body would be White
In these situations it would show a changing style which is not what I wanted to achieve. So all I did to fix this is:
<thead>
<tr>
<th colpsan="2">Name</th>
</tr>
<tr>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody>
<!-- Table Content in Here -->
</tbody>
And I then changed the style sheet to be:
tbody tr:nth-child(odd) {}
tbody tr:nth-child(even) {}
So basically I used the TBody and THead tags to make a more specific css style which is brilliant. More control, flexibility. So in my new example, you can have as many rows in the THead as you like, the content should always start on White, and to answer my question:
Does THead have anything to do with it?
Yes, it has EVERYTHING to do with it.