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..*
Related
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?
I'm using Bootstrap with tables, and trying to make some minor overrides to the default CSS with limited success.
In the table below, I'm able to add a dark border at the bottom of the table head (thead), and to the bottom of the table rows in the footer (tr in tfoot), but I cannot add a border to the bottom of the last table row (tr:last-child), or alternately the bottom of the table body (tbody), or I suppose the top of the table footer (tfoot).
I've had limited success with this:
.table-sm.event-table tbody > tr:last-child {
border-bottom: 2px solid #999;
}
However this doesn't render in all browsers, and only 'works' by making the single pixel light grey line a 2 pixel dark line, which I don't want, I just want a single pixel dark border between the last row of the body and the first row of the footer (between Row Two and Total Expense).
I know this has to do with the specificity of the CSS rules, and Bootstrap's rule taking precedent over my own, but even though I was able to make the other rules work, I cannot for the life of me figure out how to specify this one.
.event-table {
width: 100%;
}
.table thead > tr > th {
border-bottom: 1px solid #333;
}
.table tfoot > tr > td {
border-bottom: 1px solid #333;
}
<table class="table table-bordered table-sm event-table">
<thead>
<tr>
<th>Unit</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total Expense $</td>
<td class="text-right">$200</td>
</tr>
<tr>
<td>Total Revenue $</td>
<td class="text-right">$300</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Row One</td>
<td>$100</td>
</tr>
<tr>
<td>Row Two</td>
<td>$100</td>
</tr>
</tbody>
</table>
Specificity is the name of the game and if you deal with Bootstrap, you'll quickly learn that it get's very complicated and even nigh impossible. While using #ids and !important may be an immediate remedy to your situation, it will bite you in the #rse if they are used even if only moderately. Try using only a few #id if you must and avoid !important at all costs.
A safer solution is to double up on a class:
As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify.
MDN - The !important exception
The following demo has each table section (i.e. <thead>, <tbody>, and <tfoot>) with it's last row border-bottom a different color. Note that the bootstrap.css file is loaded as well, so it does work to the best of my knowledge and evidence at hand.
Demo
.event-table {
width: 100%;
}
.table thead>tr.rowA1.rowA1>th {
border-bottom: 1px solid red;
}
.table tbody>tr.rowB2.rowB2>td {
border-bottom: 1px solid lime;
}
.table tfoot>tr.rowC2.rowC2>td {
border-bottom: 1px solid blue;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<table class="table table-bordered table-sm event-table">
<thead>
<tr class='rowA1'>
<th>Unit</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class='rowB1'>
<td>Row One</td>
<td>$100</td>
</tr>
<tr class='rowB2'>
<td>Row Two</td>
<td>$100</td>
</tr>
</tbody>
<tfoot>
<tr class='rowC1'>
<td>Total Expense $</td>
<td>$200</td>
</tr>
<tr class='rowC2'>
<td>Total Revenue $</td>
<td>$300</td>
</tr>
</tfoot>
</table>
Give your tags an id instead of a class. This way, when you go to style the certain element with the id in your css, it will be at a higher priority than the Bootstrap style, which would erase the need for !important in most cases
So say you add an id to your table tag in the html like so
<table class="table table-bordered table-sm event-table" id="main-table">
You should be able to do this with success
#main-table {
width: 100%;
}
#main-table thead > tr > th, #main-table tfoot > tr > td {
border-bottom: 1px solid #333;
}
Sometimes you will have to use !important to override Bootstrap styles like so
border-bottom: 2px solid #999 !important;
I am trying to create a table that has 1 row and 8 columns. However, I want a blank spaces after the 3rd and 6th table cell. The result should be:
cell cell cell blank space cell cell cell blank space cell cell
I have tried placing margins but they don't work. I have tried implementing this code, but it doesn't work.
.brzl td:nth-child(3){
margin-right: 20px;
}
Edit:
I am trying to implement this within an AngularJS project. In the index.html i have the following code:
<div ng-switch-when="brzl">
<table class="brzl">
<tbody>
<tr>
<td ng-repeat="cell in mini.vrednost track by $index">
{{ cell }}
</td>
</tr>
</tbody>
</table>
<label class="small-label"> {{ mini.label }} </label>
</div>
The mini.vrednost basically loops through some JSON data (e.g. "123456789").
Each digit has to be placed within separate cell in the table. Now, once the '1','2', and '3' have been placed in the cells, I need to put an empty field after them and then continue with '4', '5' etc. The empty field cannot be read from the JSON data, since the whole string is already read from somewhere (I suppose the database).
I know I should have mentioned this earlier. That was my bad.
Margin doesn't work on table cells. However, padding does. Of course, if you have added borders to your table, this means you get one cell with a lot of white space.
Fiddle
What you could do (through hard coding or by injecting with Javascript or jQuery) is add a blank cell where you want the white space, remove any styling of that cell through CSS and add a width.
Working fiddle
HTML
<table>
<tbody>
<tr>
<td>cell</td>
<td>cell2</td>
<td>cell3</td>
<td></td> <!-- blank cell, no border -->
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
<td></td> <!-- blank cell, no border -->
<td>cell7</td>
</tr>
</tbody>
</table>
CSS
td {
border: 1px solid #ccc;
}
td:nth-child(4n+4){
border: none;
width: 30px; /*desired blank space*/
}
As you can see, you'll have to target every 4th cell, starting with the 4th. If you have any questions, just ask and I'll see if I can adapt the answer accordingly.
UPDATE AFTER OP'S EDIT
However, since your table is filled with data by some script, you might want to run the following jQuery AFTER the loop is done filling up the table. I have no idea how it will react on huge tables with lots of content, but it works in the updated Fiddle below.
$('tr > td:nth-child(3n+3)').after('<td></td>');
This piece of jQuery takes every 3rd child, starting with the 3rd, and adds an empty <td> to it, which is then styled by the CSS. Of course you could ad a <td> with a specific class which you then target with CSS, but as it is now, it seems to work fine.
Fiddle
Remember to add jQuery!
As i told you, you can't use margin but you can try like this method -
table {
width: 100%;
}
td{
background: #ccc;
padding: 10px;
text-align: center;
}
td:nth-child(3n){
background: #fff;
}
<table width="50%">
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td> </td>
<td>data</td>
<td>data</td>
<td> </td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
Or you can try this to set border on right side on nth-child
table {
border-collapse: collapse;
}
td{
background: #ccc;
padding: 10px;
}
td:nth-child(3n){
border-right:10px solid #fff;
}
<table width="50%">
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
Try like this: Demo
td {
border: 1px solid #ccc;
padding:10px;
}
td:nth-child(4n) {
border-color: #fff;
}
HTML:
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td></td> <!-- 3,6,... cols should be empty to get blank space -->
<td>test</td>
<td>test</td>
<td>test</td>
<td></td>
<td>test</td>
</tr>
</table>
Why cant i get background to change when i reference via a css style sheet, but works okay when done directly with color on inline style (i.e only columns 1 and 4 change their background color)
<table>
<tr>
<td bgcolor="#D6D6C2">Column 1</td>
<td class="releasetableheading">Column 2</td>
<td class=".releasetableheading">Column 3</td>
<td style="background-color:#D6D6C2">Column 4</td>
</tr>
</table>
CSS
.releasetableheading {
background-color=#D6D6C2;
}
See http://jsfiddle.net/ijabz/vnkqhz5h/ for full example
Your syntax is off. Use colon instead of equals sign, and remove period from class declaration.
Updated Fiddle - http://jsfiddle.net/vnkqhz5h/1/
HTML:
<table>
<tr>
<td bgcolor="#D6D6C2">Column 1</td>
<td class="releasetableheading">Column 2</td>
<td class="releasetableheading">Column 3</td>
<td style="background-color:#D6D6C2">Column 4</td>
</tr>
</table>
CSS:
.releasetableheading {
background-color: #D6D6C2;
}
Note that bgcolor is deprecated and should not be used and you should use classes, not inline styles whenever possible.
You should not use bgcolor attribute, it's not supported in HTML5. In HTML, you simply define your class that way :
<td class="myClass"></td>
And you can define a unique ID for an HTML element that way
<td id="myId"></td>
Then, in your CSS, the syntax has to be written that way:
.myClass{
background-color: #000;
}
#myId{
background-color: #fff;
}
Suffix for class is a dot (.) and for id is a hashtag (#).
You always write your property that way in CSS. "property: value".
Hope it helped !
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.