How to define the line style inside a table?

A

autopost

Guest
Hi,

I am designing a table in which I don' t want borders (top, left, right and bottom), but I want the lines inside the table appears in white color. How can I do it?


.tableWhiteLines {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFCC99;

...

}


Thank youPerhaps something like this:

<style>
TD {
background-color: #FFCC99;
}
</style>
<table bgcolor=white cellspacing=2>
<tr>
<td>&nbsp;&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;&nbsp;</td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;&nbsp;</td>
</tr>
</table>If I put this, all the '<td>' of my tables change to that background color, and I don' t want such thing. Anyway it doesn' t work.

I use the style '.tableWhiteLines' in this way:

<table width="451" height="129" cellspacing="0" bgcolor="#FFCC99" class="tableWhiteLines">


And I use the style thus:

.tableWhiteLines {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFCC99;
border: thin solid #FFFFFF;

}


If I use it in that way, the table appears with the white lines, but with the top, bottom, left and right white line borders as well, which I don' t want. How can I do it?..If you would post a link, or post the code for the whole table, or post a screen capture, maybe someone can help.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css table borders</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
background:#ccc;
}
td {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFCC99;
border-bottom:1px solid #FFFFFF;
}
.divider {
border-left:1px solid #FFFFFF;
}
.lastRow {
border-bottom:0;
}
-->
</style>

</head>
<body>
<!-- html here -->
<table border="0" cellpadding="0" cellspacing="0" summary="">
<table width="451" height="129" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFCC99">
<tr><td>1</td><td class="divider">2</td></tr>
<tr><td class="lastRow">3</td><td class="divider lastRow">4</td></tr>
</table>
</body>
</html>Hi,
Your code works, but I am trying to do the same thing in my page but with an attached style sheet, because I always use this system.
Now, writing the following code, only a white line is displayed at the bottom of the table.

This is my complete sample page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css table borders</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"CSS_Styles/My_Tables.css" rel="stylesheet" type="text/css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


</head>
<body>
<!-- html here -->
<table width="451" height="129" cellspacing="0" cellpadding="0" border="0" class="tableWhiteLines">

<tr>
<td width="75" height="29" align="center" valign="middle">Tilte 1 </td>
<td width="87" align="center" valign="middle">Tilte 2</td>
<td width="138" align="center" valign="middle">Title 3</td>
<td width="117" align="center" valign="middle">Title 4</td>
<td width="57" align="center" valign="middle">Title 5</td>
</tr>
<tr>
<td height="30" align="left" valign="middle"> Label 1:</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>

<td height="30" align="left" valign="middle"> Label 2:</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>

<td height="30" align="left" valign="middle" > Label 3:</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>


And here is the attached style sheet:

/* My_Tables.css Document */

.tableWhiteLines {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFCC99;
border-bottom:1px solid #FFFFFF;
}
.divider {
border-left:1px solid #FFFFFF;
}
.lastRow {
border-bottom:0;
}


What it lacks?

ThanksOK, now make a picture of what you want it to look like using paint or something, or draw it using crayons and scan it, and attach it to your next post.Add the class values:
<table width="451" height="129" cellspacing="0" cellpadding="0" border="0" class="tableWhiteLines">

<tr>
<td width="75" height="29" align="center" valign="middle">Tilte 1 </td>
<td width="87" align="center" valign="middle" class="divider">Tilte 2</td>
<td width="138" align="center" valign="middle" class="divider">Title 3</td>
<td width="117" align="center" valign="middle" class="divider">Title 4</td>
<td width="57" align="center" valign="middle" class="divider">Title 5</td>
</tr>
<tr>
<td height="30" align="left" valign="middle"> Label 1:</td>
<td class="divider"> </td>
<td class="divider"> </td>
<td class="divider"> </td>
<td class="divider"> </td>
</tr>
<tr>

<td height="30" align="left" valign="middle""> Label 2:</td>
<td class="divider"> </td>
<td class="divider"> </td>
<td class="divider"> </td>
<td class="divider"> </td>
</tr>
<tr>

<td height="30" align="left" valign="middle" class="lastRow"> Label 3:</td>
<td class="divider lastRow"> </td>
<td class="divider lastRow"> </td>
<td class="divider lastRow"> </td>
<td class="divider lastRow"> </td>
</tr>
</table>Ok, now it works. I thought that I were able to define all the properties to a single Class, '.tableWhiteLines'.

Thank you!
 
You must log in or register to reply here.
Back
Top