I made a pricing table that will change the background of the row when hovered. Due to the way I am using it I ran into two problems.
there is a 3 row span I am using to hold the purchase button as I want it vertically aligned in the center with the columns to its left. I had to use !important to keep the background white on rollover. Fixed.
when you rollover the purchase button cell its highlights the first row. This is what I do not want. I've tried all sorts of things and rearranged things as well and can't come up with any solution without removing the 3 row span.
jsfiddle
<table>
<tr>
<th colspan="3">title text</th>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
<td class="purchase" rowspan="3">purchase button</td>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
</tr>
<tr>
<td>amount</td>
<td class="pricing">price</td>
</tr>
</table>
table{
margin:.5em 0 1em 0;
width:100%;
font-size:15px;
}
table th{
padding:0px 0 10px 5px;
}
table td{
padding:2px 5px;
}
table td.purchase{
text-align:right;
width:150px;
vertical-align:middle;
background:#ffffff !important;
}
table td.pricing{
width:130px;
border-left:5px #ffffff solid;
}
table td.details {
padding:0 35px 0 15px;
}
table tr:hover td
{
background-color: #ebf1f6;
}
I had a similar requirement: apply a background color on a table row, as I hovered over the row with the mouse pointer, except on a 'selected' row, that was already highlighted in a different background color.
Using 'pointer-events: none;' achieved exactly what i wanted: JsFiddle
table#CustOrders tbody tr:hover td {
background-color: LemonChiffon;
}
table#CustOrders tbody tr#selected {
background-color: Yellow;
pointer-events: none;
}
The first thing that came to my mind is using "pointer-events" css property. But I am not sure if it is useful here. Check this link (there is a jsFiddle example available)
Also think about using some javascript code to set the logic you need. I understand that you want to use css only, but js fix can be quite small and obvious here - so why not ?
you can check Answer
HTML
<table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2" scope="row">title text </td>
</tr>
<tr>
<td width="75%" scope="row">
<table width="100%" border="0" cellspacing="2" cellpadding="2" class="amount_table">
<tr>
<td>amount</td>
<td>price</td>
</tr>
<tr>
<td>amount</td>
<td>price</td>
</tr>
<tr>
<td>amount</td>
<td>price</td>
</tr>
</table>
</td>
<td width="25%">Purchace</td>
</tr>
</table>
CSS
.amount_table tr:hover{
background:gray
}
Related
Is there a way to apply a background color through CSS at the TR level? I can apply it at the TD level like this:
.my-td{
background-color: #E8E8E8;
background:#E8E8E8;
}
However, the background color doesn't seem to get applied when I attempt to apply the background color at the TR level like this:
.my-tr{
background-color: #E8E8E8;
background:#E8E8E8;
}
Is there a CSS trick to making this work or does CSS not natively support this for some reason?
By default, applying a background color on a table row works.
Here's an example:
.odd {
background-color: pink;
}
.even {
background-color: yellow;
}
<table>
<tr class="odd">
<td>a1</td>
<td>a2</td>
</tr>
<tr class="even">
<td>b1</td>
<td>b2</td>
</tr>
<tr class="odd">
<td>c1</td>
<td>c2</td>
</tr>
<tr class="even">
<td>d1</td>
<td>d2</td>
</tr>
</table>
Something else must be interfering with your colours or there's a particular browser issue that you're encountering if this isn't working for you.
ie10 is not showing fine border over colspan.
It is showing well on other browser, but not on IE 10.
I'll post my code below.
HTML CODE:
<table>
<thead>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="4">3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td colspan="2">7</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td colspan="3">4</td>
<td>5</td>
</tr>
</tbody>
</table>
CSS CODE:
table tr td {
border: 1px solid black;
width: 100px;
}
table {
border-collapse:collapse;
}
border under 7 is gone. How can I show it?
here is example on jsfiddle :
http://jsfiddle.net/H4z7Q/
ADD: If some event occurs in ie10, border come back to normal.
You can use table inline style stats. instead of border-collapse:collapse;
<table cellpadding=0 cellspacing=0>
will count as same effect.
but will return and will chrice ur problem
The markup violates the HTML table model, as you can see by checking it with http://validator.w3.org which says, referring to the first row: “Table column 6 established by element td has no cells beginning in it”.
So all bets are off. Modify the table structure so that it conforms, or try to achieve the desired layout using other tools than a layout table.
I have to make a table with scroll property on all the table columns in the table. but it is not fixing the height of the table and also not giving the scroll property to the data.
<table>
<tr>
<td valign="top">
<h3>Latest Reviews</h3>
<p><b>This gives the latest riview posted on the website</b></br></p>
<p><b>This gives the latest riview posted on the website</b></br></p>
</td>
<td valign="top">
<h3>Top Rated</h3>
<p>9.3/10</br></p>
<p>8.3/10</br></p>
</td>
<td valign="top">
<h3>Recipes</h3>
<p><b>Recipe Title</b></p>
<p><b>Recipe Title</b></p>
</td>
</tr>
</table>
The related CSS code goes here:
table{
width:100%;
}
td{
width:30%;
height: 100px;
display: block;
overflow-y: auto;
}
After all this the table has height equal to the column with max height. Someone please solve this.
I used a table. I applied CSS ID table-4.
Following the html code:
<table border='0' width='100%' id='table-4'>
<tr><td>Date</td><td>Headline</td></tr>
<tr><td>29 DEC</td><td>Dead</td></tr>
<tr><td>30 DEC</td><td>Hit</td></tr>
<tr><td>02 JAN</td><td>Leg</td></tr>
</table>
Here is the style.css:
#table-4 { background-color: #F2F2F2;}
So the whole table's background color is #F2F2F2, but I want a different color for the first row where Date and Headline goes, so how could I modify my CSS for this thing?
You can use :first-child for this. Write like this:
#table-4 tr:first-child{
background:red;
}
Check this http://jsfiddle.net/cbK8J/
#JonathandeM.'s comment is correct. Pop <thead> and <tbody> tags in there, and change the <td> tags in the <thead> row to <th> tags (because HTML says what things are, and they're headings):
<table border='0' width='100%' id='table-4'>
<thead>
<tr><th scope="col">Date</th><th scope="col">Headline</th></tr>
</thead>
<tbody>
<tr><td>29 DEC</td><td>Dead</td></tr>
<tr><td>30 DEC</td><td>Hit</td></tr>
<tr><td>02 JAN</td><td>Leg</td></tr>
</tbody>
</table>
Then the CSS to make the heading row have a different background colour is:
#table-4 thead tr {
background-color: green;
}
you can do this:
HTML:
<td class="whatever">Date</td><td class="whatever">Headline</td>
css:
.whatever { color: #a9a9a9 }
<tr> will do the row, <td> will do the cells.
You have to add id to first tr tag:
<table border='0' width='100%' id='table-4'>
<tr id ="r1" ><td>Date</td><td>Headline</td></tr>
<tr><td>29 DEC</td><td>Dead</td></tr>
<tr><td>30 DEC</td><td>Hit</td></tr>
<tr><td>02 JAN</td><td>Leg</td></tr>
</table>
and then add another css line:
#table-4 #r1 { background-color: blue;}
it will give you blue color
Or you can simply modify only the Html file, no change in css
<table border='0' width='100%' id='table-4'>
<tr><td bgcolor='red' >Date</td><td bgcolor='red'>Headline</td></tr>
<tr><td>29 DEC</td><td>Dead</td></tr>
<tr><td>30 DEC</td><td>Hit</td></tr>
<tr><td>02 JAN</td><td>Leg</td></tr>
</table>
I have a table based layout, with one main two-column table, for left and right sides of a form. Each column contains an inner, two-column table, with a label and and input column, and each field on its own row.
Could I use CSS to set the width of both the input columns?
E.g.
<table id="frameTable">
<tr>
<td id="leftFieldList">
<table class="formColumn">
<tr>
<td>Surname</td>
<td><asp:TextBox.....></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox.....></td>
</tr>
....
....
<table>
</td>
</table>
In the table with class "formColumn", I want to set the the width of the second <td>, with the server controls. I would prefer to do this without assigning a class to every second <td> in my field lists.
The best solution around: use col tags!
<style> .col2 { width: 200px; } </style>
...
<table class="formColumn">
<colgroup>
<col></col>
<col class="col2"></col>
</colgroup>
<tbody>
<tr>...
</tbody>
</table>
Another IE6-unfriendly solution is
.formColumn td:last-child { width: 200px; }
If you're not stuck on CSS, you could use col groups
<table class="formColumn">
<colgroup>
<col />
<col width="200px" />
</colgroup>
<tr>
<td>Surname</td>
<td><asp:textbox..../></td>
</tr>
</table>
Usually, you could do:
table.formColumn tr td:last-child { width: 200px; }
but IE7 does not recognize last-child, so you might have to go with
table.formColumn tr td+td { width: 200px; }
IE6 does not recognize the + selector, according to quirksmode.org.
If you're planning on supporting IE6, I don't have a solution for you,
with your current markup.
That aside, some argue that you should not use tables to design the layout
of your website. That second table (formColumn) could've been replaced with
something like this:
<fieldset><label ...>Surname</label><YourTextInput /></fieldset>
If you want to set them to the same width it's easy:
table.formColumn td {
width: 150px;
}
If you want them to be different widths, it's a bit more problematic but not hugely so. Easiest option is just to assign a class to the td elements in the first row:
<table id="frameTable">
<tr>
<td id="leftFieldList">
<table class="formColumn">
<tr>
<td class="left">Surname</td>
<td class="right"><asp:TextBox.....></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox.....></td>
</tr>
....
....
<table>
</td>
</table>
then:
table.formColumn td.left {
width: 150px;
}
table.formColumn td.right {
width: 300px;
}
Since the rest of the column will take those widths.
You could also use the + selector, but it's not supported in IE6:
table.formColumn td {
width: 150px;
}
table.formColumn td + td {
width: 300px;
}