Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table borders between rows only

Status
Not open for further replies.
chowki

chowki

Technical User
Nov 25, 2004
6
GB
How can I create a table that only has a border on the inside in between rows?

I've tried doing:

.CSS file:
body {
margin-top:0;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
h1 {

}

.class1 a {
display:block;
background-color:#EEEEEE;
color:#336666;
}
.class1 a:hover {
background-color:#DDDDDD;
}

HTML:
<div class="class1">
<table align="left" border="2" bordercolor="#000000" frame="void" rules="rows">
<tr><td>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</td>
</tr>
</table>
</div>

but this doesn't show up any borders. What am I missing?
 
Sort by date Sort by votes
Code: 
table {
   border-collapse:collapse;
/* only put this if you want a border around the outside of the table */
   border:1px solid #000000; 
}

table tr {
   border-top:1px solid #000000;
   border-bottom:1px solid #000000;
}

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
That's putting a border around the table but the horizontal lines inbetween rows are still not showing up.

I had a hunch and so removed all table styling except I kept border="1" in the table tag. It showed up a border around the edge but not for any of the internal borders so it's something else I've done.

Here's the entire code:
/* main */
body {
margin-top:0;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}

.bodyclass a {
color:#336666;
}
.class1 a {
display:block;
background-color:#EEEEEE;
color:#336666;
}
.class1 a:hover {
background-color:#DDDDDD;
}
.class1 ul {
margin-left: 0;
}
.class1 tr {
border-bottom-style:solid;
border-bottom-color:#000000;
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="description here.">
<meta name="keywords" content="keywords here">
<title>Title here</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<span class="bodyclass">
<!--Include Header -->
<script type="text/javascript" src="header.js"></script>
<!--End Header -->
<br>
<table border="0" cellspacing="0" align="center" width="80%">
<tr>
<td width="20%" valign="top">
<h3>Section Links</h3>
<div class="class1">
<table align="left" border="2" bordercolor="#000000" frame="void" rules="rows">
<tr>
<td>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</td>
</tr>
</table>
</div>
</td>
<td width="63%">
<h1><img src="" alt="image" width="200" height="100" border="0" align="left">News Title</h1>
<p> Centre text </p></td>
<td width="17%" valign="top">
<h3><img src="" alt="" width="107" height="66"></h3>
<p><img src="" alt="" width="107" height="66"></p>
<p><img src="" alt="" width="107" height="66"> </p>
</td>
</tr>
</table>
<p>&nbsp;</p>
<!-- Include footer -->
<script type="text/javascript" src="footer.js"></script>
<!-- End footer -->
<p>&nbsp;</p>
</span>
</body>
</html>
 
Upvote 0 Downvote
Scrap that, I've seen my mistake. Your reply KAHT did work,

Thank You
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
890
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
162
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
167
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
144
vacunita
vacunita
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
174
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top