|
CSS - Css Rollover Including Table Cell Bgcolor ?
Hi, anyone an idea how to change both text color AND table cell bgcolor on rollover (using style sheets) ?
thx Gerhard Similar TutorialsI have a table that is populated using Spry. For some of the users, the table is showing its' borders in white when there is no data in the cell and for other users (like me) it's showing its' borders in black like expected. This is occurring in IE8 for the user. I have IE8 as well. Here is a setup of my table Code: <div id="Content">
<p class='instructions'>Click a column header to sort the table.</p>
<div spry:region="jdmba">
<div spry:state="loading" class="loading">Please wait while alumni data loads…</div>
<table class="spry" cellspacing="0" cellpadding="0">
<tr>
<th scope="col" width="108px" class="sortable" spry:sort="last" id="last">Last Name</th>
<th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
<th scope="col" width="269px" class="sortable" spry:sort="account" id="account">Company</th>
<th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
<th scope="col" width="82px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
<th scope="col" width="82px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
</tr>
</table>
<div class="Overload">
<table class="spry" cellspacing="0" cellpadding="0">
<tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
<td width="108px">{last}</td>
<td width="106px">{first}</td>
<td width="269px">{account}</td>
<td width="66px">{state}</td>
<td width="82px">{hls_year}</td>
<td width="82px">{hbs_year}</td>
</tr>
</table>
</div>
</div>
Here is my CSS file Code:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#News a:link {
color: #00F;
}
#News a:hover {
color: #00F;
text-decoration: underline;
}
body {
background: #000 repeat;
}
#wrap {
background: #000;
width: 900px;
border: thick solid #9C0029;
float: left;
height: auto;
padding: 0px 0px 1em;
margin-top: 2%;
margin-left: 10%;
}
#footer {
font: bold small/50px Arial, Helvetica, sans-serif;
color: #FFF;
background: #9C0029;
text-align: center;
height: 50px;
width: 850px;
margin-left: 25px;
}
#Header {
background: #8F001C url(../images/banner.jpg) no-repeat center center;
width: 850px;
height: 150px;
margin-top: 20px;
margin-right: 20px;
margin-left: 25px;
}
h1 {
font: normal 18px Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
}
h2 {
font: small Georgia, "Times New Roman", Times, serif;
color: #333;
text-align: justify;
}
h3 {
font: normal medium "Times New Roman", Times, serif;
color: #FFF;
}
h4 {
font-size: small;
color: #333;
text-align: left;
}
.banners {
background: #FFF0B2;
width: auto;
height: auto;
font: 18px Arial, Helvetica, sans-serif;
padding-top: .5em;
padding-bottom: .5em;
text-indent: 10px;
}
.Content {
font: 14px/normal Georgia, "Times New Roman", Times, serif;
text-align: justify;
display: block;
padding: 2em 3em 3em;
}
.Content a:link {
color: #00F;
}
.Content a:hover {
color: #00F;
text-decoration: underline;
}
.Content a:visited {
color: #00F;
}
#inner_body {
background: #FFF;
height: auto;
width: 800px;
margin-top: 0px;
margin-left: 50px;
padding-top: 0.5em;
padding-bottom: .5em;
}
#inner_border {
margin: 0em auto auto;
border: thin solid #8E887C;
width: 775px;
padding: 1em 0em 0em;
}
#nav_bar {
height: 3em;
width: 100%;
margin-left: 0%;
text-align: center;
}
#Content {
height: auto;
width: 95%;
padding: 0em 0% 5em;
margin: 2.5% 2.55% 2%;
text-align: left;
font-family: Verdana;
}
#nav {
height: auto;
width: 20em;
}
#News {
margin-left: 2px;
height: 30%;
background: #FFF0B2;
padding: 3%;
}
#News a:visited {
color: #00F;
}
.Overload
{
height: 208px;
overflow: auto;
}
.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
font-family: Verdana;
font-size: 12px;
line-height:20px;
cursor: pointer;
}
.instructions {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-bottom:8px;
}
.loading {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-top:0px;
margin-bottom:8px;
color:#900;
}
table.spry th {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry td {
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
font-family:Verdana;
padding: 0px;
margin: 0px;
}
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px; }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }
I'm only placing borders on the left and bottom so that in my detail cells the borders aren't doubled up. So for example when I have no data for the cell State, the left and bottom border of that cell is white rather than black. Any ideas? Thanks! I'm having some problems with CSS. If you look at the pictures below, the first is a screenshot of what it is supposed to look like. It's how it looks in most browsers. The second one, however, is how it looks in IE 6 on Windows and IE 5 on the Mac. It is wrong. Correct look Incorrect look I want to know how to fix this. The little colored boxes are supposed to be squares and have solid borders on them. The shape is off and the borders are missing on the IE version. Also, on the progress bar, there is not supposed to be space between the cells but there is. There is also space between every cell on the page and there is not supposed to be any. Here is my main CSS: Code:
body { background-color: #FFFFFF; }
a { text-decoration: none; font-weight: bold; }
a:link { color: #003366; background-color: transparent; }
a:visited { color: #003300; background-color: transparent; }
a:active { color: #339933; background-color: transparent; }
a:hover { text-decoration: underline; }
table { border: 1px solid black; border-collapse: separate; border-spacing: 0px;}
td, th { border: 0px solid black; padding: 5px; text-align: center; white-space: nowrap; }
tr.one { background-color: #FFFFFF; }
tr.two { background-color: #DDDDDD; }
table.squares { border: 0px; border-spacing: 1px; width: 50px; height: 10px; }
td.square { border: 1px solid grey; padding: 4px; }
td.nopadding { padding: 0px; }
.default { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; }
.h1 { font-size: 200%; font-weight: bold; text-align: center;}
.h2 { font-size: 120%; font-weight: bold; }
.h3 { font-weight: bold; }
.step { font-size: 150%; font-weight: bold; color: #999999; }
Here is one of the sets of squares: Code: <table class="squares">
<tr>
<td class="square" style="background-color: #CCCC66"></td>
<td class="square" style="background-color: #CC9966"></td>
<td class="square" style="background-color: #990000; border: black"><td>
<td class="square" style="background-color: #669966"></td>
<td class="square" style="background-color: #669999"></td>
</tr>
</table>
And finally, here is one of my progress bars: Code: <table style="color: white; width: 100px">
<tr>
<td style="padding:0px; text-align: right; padding-right: 5px; background-color:#222244; width:41px"></td>
<td style="padding:0px; text-align: left; padding-left: 5px; background-color:#666666; width:59px">40.7%</td>
</tr>
</table>
And in case that code is not enough, here is a link to the full HTML. According to this CSS test my CSS is not wrong. So does IE just suck? Is there something I can do to make it work in all browsers? My last question is, should I be using div tags for my boxes and progress bars instead of tables? I couldn't figure out how to make them work with divs so I just went with what I knew. Could someone give me an example of each using divs so I can learn how to make it work? Hi there! This might seem really basic but I don't seem to be able to remove the default border from a cell I created. The code looks like this: "<p> </p> <table align="center" style="margin-left: auto; margin-right: auto; border-width: 0px;"> <tbody> <tr> <td> <div style="overflow: auto; height: 475px; width: 700px; border-style: hidden;"> <p align="center"> <img height="457" width="600" src="images/stories/vlkommen3.jpg" alt="vlkommen3" style="margin: 0px; vertical-align: middle;" /> </p> <p align="center"> </p> <p> </p> </div> </td> </tr> </tbody> </table> <p> </p> How shall I do to hide the border? Thanks in advance! /Kristoffer Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. Hello, I need to place an image in the bottom right-hand corner of a table cell. How would I do this using CSS, keeping in mind that text and other goodies are already present in the cell? I'd appreciate any advice. Thanks. hi, and thank for the help in advance. i was wondering if it is possible to make a table cell's top border different thickness versus the sides and the bottom. Hi. I've got a question regarding placing an image within a table cell and using CSS to achieve a certain result. The table cell's width is determined at 530px, but the height is dependent on the actual length of the copy. What I'm looking to accomplish is have an image ghosted in the background of the text. It is supposed to appear in the lower right hand corner of the cell. I've already created the image with a transparent background, but it's not implementing correctly. Can I use a Z-Index style to achieve the item being placed under the text? Also, how do I make sure that the image is positioned in the lower right hand corner of the cell regardless of the height of the cell? Thanks! Simon315 Hello, I have a table and I am styling its cells: table.Grid td {background-color: red;} Inside this table I will have some other tables but I don't want their cells to have the styles changed. I see two options: give a class to Grid table cells: table.Grid td.Grid {background-color: red;} Reset the changes in child tables: table.Child1 td, table.Child2 td, table.Child3 td {background-color: white;} But can I apply the following style: table.Grid td {background-color: red;} And make it only for the cells inside that table but not inside the child tables in this code line? ... without needing to reset the styles on child table cells or give main cells a class ... Thanks, Miguel Check out the following code. Notice how the dark blue cell has one thin layer peeping through right inside the black border of the outer table? I can't figure out why. What this should look like is a black border, followed by a border of 3 white thickness all around the light blue cells, as well as between the light blue cells. Fixing this peeping cell in a way in which it is sucked out is fine - but if you have a better solution as to how to make the white spacing 3 around the cells AND the table, with a black border, I will accept. Thanks Code:
<html>
<head>
<style type="text/css">
.table1
{
border-collapse: collapse;
border: 1px;
border-style: solid;
border-color: #000000;
background-color: #FF0000;
}
.table2
{
border: 1px;
border-style: solid;
border-color: #FF0000;
border-collapse: collapse;
width: 300px;
}
.cell1
{
background-color: #0099ff;
border: 0px
border-style: solid;
}
.cell2
{
border: 3px;
border-style: solid;
border-color: #FFFFFF;
background-color: #95caff;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<table class="table1">
<tr>
<td class="cell1">
<table class="table2">
<tr>
<td class="cell2"> </td>
</tr>
<tr>
<td class="cell2"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
hi all, i'm trying to make a vertical menu using CSS2 and XHTML. the problem i'm facing is that i need a DIV inside a table cell, which should take 100% width and height, and inside this DIV i will place arbitrary contents that scrolls if they overflows. This is the code i have written so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
TestMenu
</title>
<style type="text/css">
BODY, HTML {
height: 100%;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.menuContainer {
background-color: red;
width: 300px;
height: 100%;
border-spacing: 0px;
}
.menuItem {
background-color: green;
}
.menuItemOpen {
background-color: yellow;
}
.menuItemContents {
margin: 0px;
padding: 0px;
vertical-align: top;
}
.menuItemContainer {
height: 100%;
width: 100%;
border-spacing: 0px;
}
.menuTitle {
background-color: blue;
color: white;
height: 20px;
margin: 0;
padding: 0;
}
.menuContents {
padding: 0px;
}
.menuInnerContents {
background-color: orange;
overflow: auto;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table class="menuContainer">
<tr class="menuItemOpen">
<td class="menuItemContents"><table class="menuItemContainer">
<tr>
<td class="menuTitle">Item 1</td>
</tr>
<tr>
<td class="menuContents"><div class="menuInnerContents"><div>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/>This are the contents<br/>
of this menu.<br/></div></div></td>
</tr>
</table></td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 2</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 3</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 4</td>
</tr>
<tr class="menuItem">
<td class="menuTitle">Item 5</td>
</tr>
</table>
</body>
</html>
as you can see the "menuInnerContents" DIV isn't taking all the space available and the text inside it doesn't overflow. Help me please! hi all... i have a table cell "td" with 3 divs in it. what i need is to get it to align the top div to the top, middle div to the middle and 3'ed div to the bottom... this is all fine but i cant get to do that, and the auto increase height on the middle one dont work ? btw: this is for the IE style sheet, mozilla(firefox) works great.... frank/ Hi, my rollover image for my table does not work. It does not seem to preload the images as expected, so the rollover effect does not look good. There seems to be some type of a lag when I rollover. I don't understand why? Below is the code. It can also be found at http://members.lycos.co.uk/eflix/junk.html Code: <html>
<head>
<SCRIPT language="JavaScript">
if (document.images){
var preloadPic1 = new Image();
preloadPic1.src = 'http://members.lycos.co.uk/eflix/TBOFF.gif';
var preloadPic2 = new Image();
preloadPic2.src = 'http://members.lycos.co.uk/eflix/TBON.gif;';
}
</SCRIPT>
<STYLE>
.topbar {background-image:url('http://members.lycos.co.uk/eflix/TBOFF.gif'); }
.topbar2 {background-image:url('http://members.lycos.co.uk/eflix/TBON.gif;');}
</STYLE>
</head>
<body>
<br><br><br><br><br><br><br>
<table cellspacing=0 cellpadding=0 border=0 width=770>
<tr><td>
<table cellspacing=0 cellpadding=0 width=770 border=1 bordercolor=#6DBEE8
style="border-collapse: collapse; border-width: 1px;">
<tr height=20>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">A</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">B</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">C</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">D</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">E</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">F</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">G</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">H</a>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
Hey, I have a problem with IE and my CSS. I have a table with a background-image and I wan that to change to a certain color on rollover. div.special {background-image: url(../images/pinkfade_bg.gif);} div.special:hover { background:#F8F8F8; } div.normal { background:#FFFFFF; } div.normal:hover { background:#F8F8F8; } Now this works fine in Mozilla, Safari etc. Just not IE Any ideas? Hey all, I'm working with a table in which the top row serves as column headers. Each column header can have a label-link as well as two graphics representing options for selecting an ascending or descending sort. The images are done through CSS so to allow use of :hover for mouse-over image swapping. My problem is that I can't figure out a combination of CSS to make it so that, should a person's resolution be too low or should they narrow their browser window to the point where it attempts to reduce column width, that the text and images remain side-by-side. A sample of the problem can be found he http://www.weblifenetwork.net/sample.html In this sample the first cell has a small, secondary table within it for the purpose of demonstrating the behavior I'm after. The second cell is kind of my current test cell (and the closest I've gotten to the correct behavior as of this post), and all other cells are using the same problematic CSS. As you enlarge/reduce the width of your browser, you should notice this behavior: First Cell: No wrapping. No display anomalies. Second Cell: Unwanted wrapping. No display anomalies. Other Cells: No wrapping. Images begin flowing over text. Text extends into neighboring cell. Any help in duplicating the behavior of the first cell using only CSS would be greatly appreciated. I've spent over a day in a CSS IRC channel to no avail. hi all ! Im doing a calendar and I want to make the cell "TODAY" different from the rest. So far I have to sets: Code: .dayrow {
background: #FFF;
height: 20px;
}
And today Code: .today {
color:#007eff;
height: 20px;
}
And the PHP code that controls it: PHP Code: if($col==1) $xml.="\n<tr class='dayrow'>"; $xml.="\t<td valign='top' onMouseOver=\"this.className='dayover'\" onMouseOut=\"this.className='dayout'\" onClick=\"AfterDaySelected($cur,$month,$year,event)\">"; if($i <= ($days+($start-1)) && $i >= $start) { $xml.="<div class='day'><b"; if(($cur==$today[mday]) && ($name==$today[month]) && ($year2==$today[year])) $xml.=" class='today'"; $xml.=">$cur</b></div>"; Is there a way to overwrite the BG in dayrow with one I put in the today class? So all the days remain the same except for that one? Thanks a lot ! Hello, I have too work with 3rd party code which I am not allowed to modify. It is .jsp code that calls(includes) a header file which I am alloud to modify. However the header unfortunatly is trapped inside a table cell that is 540 px wide but I want my header to span the full width of the page. I built the Header.jsp with a css layer. If I set the layer property to width=100% well 100% of 540 is 540 so it comes out short. If I set the absolute px width than at 860 screen resolution the header gets cut off. Here is some 'view source' code to just generate the .jsp to html: </head> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <!------------------------------The Login Page calls itself to verify login info and then redirects---------------> <TABLE width="540" border="0" cellspacing="0" cellpadding="0" > <TR> <TD align="left" valign="top" nowrap> <form NAME="Login" onSubmit="return checkRequired()" ACTION="LoginValidate.jsp" METHOD="post"> <input type="hidden" name="finalize" value="0"> <!------------------------------------------------------HEADER---------------------------------------------------------> <p> </p> <div id="Layer1" style="position:absolute; width:100%; height:115px; z-index:1; top: 0;"> <table border=0 cellpadding=0 cellspacing=0 align="center" width="100%"> Blah blah blah. So you see that a 100% table is created then a 540px table with the 'include/header.jsp' code. So Basically is there a way to break out of the table cell? I understand 'float' allows you to overide the inherited structure but it does'nt really apply here? here is a url: URL The header at the top needs to span the whole page. The header file is the upper blue banner as well ast the light blue faded banner logo. Thanks in advance... I am not sure the best way to colour half a table cell? Basically we have a booking system with a table that shows booked days. On the date a booking starts I want to make the right half of the table cell (actually I would prefer to use a triangle on the top right - a diagonal half) the correct colour, and the same principle applies to a departure date. I was going to just use two 50% divs for the left/right split. But the diagonal split is a bit trickier. Should I just use 2 100% height/width divs and apply a different graphic to each? Hi, I am very new to CSS and was wondering if there is a way to angle text in a <TD></TD> cell of a table? My problem is that along the top of my table I have to list the times e.g. 12:00:00, 12:15:00, to 23:45:00. This makes the width of my table much bigger. I was wondering if its possible to angle the text so it stands ons its head - so to speak - that way the column width would be much smaller? Thanks in advance j I have an image I want to display in a <td> cell, that scales with the cell dimensions. How do I do that? I have set my table cell #3 to 246px and have placed an image (called keyboard.jpg) with a width of 246px in it as a background image (the only cell in the table with an image), yet the table cell has expanded beyond that 246px width. I need to set the cellpadding to 5px because for legibility for all the other cells (with just text) in the table. Can I turn off the cellpadding for just this one cell #3 that has an image in it? Why does a background image in a table cell react to the table's cellpadding? Should I remove the keyboard.jpg as a background image and make it an in-table image? <em>Whatever the case, how can I make the image fit nicely without any extra space in the cell?</em> Here's my code and my stylesheet: <div id="table"> <table width="725" border="0" cellpadding="5" cellspacing="0" class="table"> <tr> <td width="1"> </td> <td class="cell1" width="130"><p><strong>Yada</strong></p> <p>Bla bla bla</p> <p>Bla bla bla</p></td> <td class="cell2" width="124"><p><strong>Yada</strong></p> <p>Bla bla bla</p> </td> <td class="cell3" width="246"></td> <td class="cell4" width="174"><p><strong>Yada</strong></p> <p>Bla bla bla<br /> <br /> Bla bla bla</p></td> </tr> <tr> <td class="tdblue"> </td> <td class="cell5"><p><strong>Yada</strong></p> <p>Bla bla bla</p></td> <td class="cell6"><p><strong>Yada</strong></p> <p>Bla bla bla</p></td> <td class="cell7"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p></td> <td class="cell8"><p><strong>Yada</strong></p> <p>Bla bla bla</p></td> </tr> <tr> <td> </td> <td class="cell9"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla</p></td> <td class="cell10"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla.</p></td> <td class="cell11"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p></td> <td class="cell12" width="174"><p><strong>Yada</strong></p> <p>Bla bla bla Bla bla bla Bla bla bla </p></td> </tr> </table> Here's my stylesheet: table { width: 760px; margin: auto; font-family: verdana, arial, sans-serif; font-size: 11px; font-weight: 400; line-height: 150%; text-align: left; text-decoration: none; letter-spacing: .5px; } table td { vertical-align: top; } td.cell1 { background: white; padding: 5; width: 130px; } td.cell2 { background: #F7F4EE; padding: 5; width: 124px; } td.cell3 { background: #ffffff; background-image: url(../images/keyboard.jpg); background-repeat: no-repeat; spacing: 0; padding: 0; width: 246px; } td.cell4 { background: #F7F4EE; padding: 5; width: 174px; } td.cell5 { background: #DFE5F0; padding: 5; width: 130px; } td.cell6 { background: white; padding: 5; width: 124px; } td.cell7 { background: #DFE5F0; padding: 5; width: 246px; } td.cell8 { background: white; padding: 5; width: 174px; } td.cell9 { background: white; padding: 5; width: 130px; } td.cell10 { background: #F7F4EE; padding: 5; width: 124px; } td.cell11 { background: white; padding: 5; width: 246px; } td.cell12 { background: #F7F4EE; padding: 5; width: 174px; } .tdblue { background: #DFE5F0; } .tdtan { background: #F7F4EE; } |
|||||||