While working on some dynamic styling for tables I ran across an issue that took me down a rabbit hole trying to apply a class and is driving me crazy. I believe I found the root of my problem with this, but do not understand why it is happening. I have a working CSS class applied to a table and displaying as expected - lets call the class "foo". I noticed that I could not get any CSS to work on another table - lets call that CSS class "bar". Here is the HTML for it:
.foo th,
.bar th {
background-color: #007FA4;
}
.foo tr:nth-child(even),
.bar tr:nth-child(even) {
background-color: #D5D8DC;
}
.foo tr:hover,
.bar tr:hover {
background-color: #3498DB;
}
.foo th,
.bar th {
background-color: #87BED4;
}
<table class="foo">
<tr>
<th>Foo Header</th>
</tr>
<tr class="sub-header">
<th>Col</th>
</tr>
<tr>
<td>Test 1</td>
</tr>
<tr>
<td>Test 2</td>
</tr>
</table>
<table class="bar">
<tr>
<th>Bar Header</th>
</tr>
<tr>
<th>Col</th>
</tr>
<tr>
<td>Test 1</td>
</tr>
<tr>
<td>Test 2</td>
</tr>
</table>
When I apply this, my "bar" table does not have any formatted applied to it. However, if I change the "bar" table's class to be "foo" (no change to the CSS) it works and both tables are formatted.
This leads me to believe I am missing/do not understand something that is going on behind the scenes of CSS. What would cause this type of behavior?
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.
I have a simple HTML table generated with PHP from a database where in some cases one cell spans over more than one row. As a simple example:
<table>
<tr class ="highlightRow">
<td>Cell 1</td>
<td rowspan="2">Cell over more rows</td>
</tr>
<tr class ="highlightRow">
<td>Cell 2</td>
</tr>
</table>
I highlight the row the mouse is over with a simple CSS rule:
.highlightRow {
background-color: #FFF;
}
.highlightRow:hover {
background-color: #EEE;
}
I can not find any solution (that is CSS only) to highlight 'Cell over more rows' when the mouse hovers over 'Cell 2'.
I don't know if this will satisfy your need, but have a look at my solution
.highlightRow {
background-color: #FFF;
}
.highlightRow:hover{
background-color: #EEE;
}
table:hover .include{
background-color: #EEE;
}
<table>
<tr class ="highlightRow">
<td>Cell 1</td>
<td rowspan="2" class="include">Cell over more rows</td>
</tr>
<tr class ="highlightRow">
<td>Cell 2</td>
</tr>
</table>
Thr trick is to highlight .include cell every time the table has been hovered and add some rule to highlight tr everytime it's hovered.
I had meet same problems in my projects.We cannot do it.That is why most of all developers perefered jquery DOM traversing methods(parent(),child(),sibling(),next(),prev(),After(),etc..,)
Reference: Is there a CSS parent selector?
Conclusion is :there is no option in CSS for select the parent.we can with javascript help.
**we love coding..*
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.
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.
I have a matrix that I am showing in html table. I have my header row (th) but I am trying to see if there is such things as header column that I can style similar to header row. Right now I am using a class=odd and class=even on my TR in my Tbody so I am not sure if there is a way to have a column overwrite this row css logic.
Given this markup:
<table>
<thead>
<tr>
<th> </th>
<th>Field 1</th>
<th>Field 2</th>
</tr>
</thead>
<tbody>
<tr class="even">
<th>Row 1</th>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr class="odd">
<th>Row 2</th>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>
You could use this CSS:
thead th {
background-color: red;
}
tr.even td {
background-color: blue;
}
tr.odd td {
background-color: yellow;
}
tbody tr.odd th, tbody tr.even th {
background-color: green;
}
See this in action here.
It might seem odd but try the <col> tag, you don't see it very often but I think it's great!
<table width="100%" border="1">
<col style="background:red;" align="left" />
<col align="left" />
<col align="right" />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Of course you'd want to put a class on the <col> tag as opposed to writing the style right in there.
Also I'd combine this with the other folks answers when it comes to the CSS. As for using pseudo classes for even/odd, if you want to retain compatibility with IE6 you'll need to apply the striping with JavaScript, or your application code.
you can target a column using CSS td:first-child or make the header cells th instead of td and differentiate using thead th and tbody th