asked on How to make a table td border actually only 1 px
I have applied some css to a table on my site http://dev.purepages.com/chris/swansway/carinfo.php?car=50
All i need to know is how to make the table at the bottom only 1px on the internal td's?
I understand that each td is having a border applied to itso it creates a double border appearance, how can i make it so that it only creates a 1px border?
All i need to know is how to make the table at the bottom only 1px on the internal td's?
I understand that each td is having a border applied to itso it creates a double border appearance, how can i make it so that it only creates a 1px border?
CSSHTML
Last Comment
Mark Steggles
You just need to apply "border-bottom: 1px;" to your td declaration for that table in CSS.
ASKER
Thats nearly it but it appears to be taking the border off completely.
If you can see it doubles up the borders on all the cells and if i do that border-right:1px it completely removes the border?
If you can see it doubles up the borders on all the cells and if i do that border-right:1px it completely removes the border?
Hello cg_medistox,
use this css property
border-collapse:collapse;
Regards,
Steggs
use this css property
border-collapse:collapse;
Regards,
Steggs
Try it in different browsers, as I remember, IE and Firefox have border issues.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
cg_medistox,
I've built an HTML page with a two cell table within it and two CSS styles that are applied to the table cells.
• The top table has the ".top-table" CSS style applied to it. The ".top-table" has a 1 pixel border on the left, top and right side and the bottom is set to zero pixels.
• The bottom table has the ".bottom-table" CSS style applied to it. The ".bottom-table" has a 1 pixel border set on all four sides of the table.
Below is the code for the HTML... copy the code below, and strip out what you need and see if this works for your needs.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<meta http-equiv="content-type" content="text/html;charset
<title>table borders</title>
<style type="text/css" media="screen"><!--
.top-table { padding: 12px; border-color: black; border-style: solid; border-width: 1px 1px 0; }
.bottom-table { padding: 12px; border: solid 1px black; }
--></style>
</head>
<body>
<table width="519" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="top-table">This table has the ".top-table" CSS style applied to it. The ".top-table" has a 1 pixel border on the left, top and right side and the bottom is set to zero pixels.</td>
</tr>
<tr>
<td class="bottom-table">This table has the ".bottom-table" CSS style applied to it. The ".bottom-table" has a 1 pixel border set on all four sides of the table.</td>
</tr>
</table>
<p></p>
</body>
</html>
I've built an HTML page with a two cell table within it and two CSS styles that are applied to the table cells.
• The top table has the ".top-table" CSS style applied to it. The ".top-table" has a 1 pixel border on the left, top and right side and the bottom is set to zero pixels.
• The bottom table has the ".bottom-table" CSS style applied to it. The ".bottom-table" has a 1 pixel border set on all four sides of the table.
Below is the code for the HTML... copy the code below, and strip out what you need and see if this works for your needs.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<meta http-equiv="content-type" content="text/html;charset
<title>table borders</title>
<style type="text/css" media="screen"><!--
.top-table { padding: 12px; border-color: black; border-style: solid; border-width: 1px 1px 0; }
.bottom-table { padding: 12px; border: solid 1px black; }
--></style>
</head>
<body>
<table width="519" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="top-table">This table has the ".top-table" CSS style applied to it. The ".top-table" has a 1 pixel border on the left, top and right side and the bottom is set to zero pixels.</td>
</tr>
<tr>
<td class="bottom-table">This table has the ".bottom-table" CSS style applied to it. The ".bottom-table" has a 1 pixel border set on all four sides of the table.</td>
</tr>
</table>
<p></p>
</body>
</html>
ASKER
Sorry Chiselneck, i appreciate the effort you put into answering this question but the border collapse was the solution i needed.
Steggs - I had to do an adaptation of the solution you provided as that solution applies everything to every table in my page, hence a lot of lines everywhere.
I managed to adapt it to the table i need to though so thanks.
Steggs - I had to do an adaptation of the solution you provided as that solution applies everything to every table in my page, hence a lot of lines everywhere.
I managed to adapt it to the table i need to though so thanks.
Yes, my post would apply the css to all table cells. It is up to you which tables you apply it to, therefore, I feel that grade B instead of grade A is unfair :(