putting borders on parts of tables [Archive]

Click to See Complete Forum and Search --> : putting borders on parts of tables

Karen Nelson

06-14-2006, 11:51 AM

Hi,
I am trying to format fractions using css and tables. Each side of the fraction has both a number and units (like, 2.54 cm / 1 in). I would like to use the border-bottom property to create the fraction bar. However, if I apply the class to the entire row, I get no border, and if I apply the class to the individual cells, I get a small break in the fraction bar.

Secondly, I put a gray background behind the units, but the gray reaches all the way to the fraction bar on the top (but not bottom) of the fraction. I would prefer to have a small separation in each case.

If anyone can help fix these problems, I would really appreciate it!
-Karen.

<html>
<head>
<style type="text/css">

</style>
</head>

<body>
<table width="10%">
<tr class="frTop"><td >2.54</td><td class="units">cm</td></tr>
<tr class="frBottom"><td>1</td><td class="units">in</td></tr>
</table>
</body>
</html>

hutcheson83

06-14-2006, 12:27 PM

Hi,
I am trying to format fractions using css and tables. Each side of the fraction has both a number and units (like, 2.54 cm / 1 in). I would like to use the border-bottom property to create the fraction bar. However, if I apply the class to the entire row, I get no border, and if I apply the class to the individual cells, I get a small break in the fraction bar.

Secondly, I put a gray background behind the units, but the gray reaches all the way to the fraction bar on the top (but not bottom) of the fraction. I would prefer to have a small separation in each case.

If anyone can help fix these problems, I would really appreciate it!
-Karen.

<table width="10%" cellpadding="0" cellspacing="0">
<tr class="frTop"><td >2.54</td><td class="units">cm</td></tr>
<tr class="frBottom"><td>1</td><td class="units">in</td></tr>
</table>

I'm not positive this is the most elegant way to complete your task but you can add cellpadding and cellspacing to the table and it will get rid of it.. if you set them bot to 0 that is.

Karen Nelson

06-14-2006, 01:34 PM

Thanks -- this solves both of my problems. I did some searching and it seems that cellspacing is not supported through css (as opposed to html tags) so I just need to leave in the html for now.

Thanks again,Karen.

felgall

06-14-2006, 03:12 PM

A better solution if you want to do it properly with CSS is to get rid of the table completely and just use divs and spans.

KDLA

06-14-2006, 03:24 PM

Your css padding settings should have units after the numerals.
padding-bottom: 2px;

Use margin:0; as a replacement for your table's cell spacing. Padding and width can be CSS driven, too.
<table style="width: 10%; margin: 0; padding: 0;">
or for individual cells
<td style="width: 10%; margin: 0; padding: 0;">
(Also can be designated as a table class in the <head> section.)

KDLA