css table borders and spacing

kemton · May 11, 2006

I have a table in which I'm using css to set up the options of the
page, and I cannot get the spacing to do what I want.

In the following html page, I would like for the table with Sublink1,
2, and 3 to be directly against Link 3. Right now there is a gap of
about 5 pixels. I would appreciate any suggestions on how to resolve
this:

------------------ Inserted html -------------------------
<head>
<style>
body {
margin-top: 30px;
font-family: Arial, sans-serif;
}

table.tb_lb {
margin-left: 3px;
}

table.tb_internal_lb {
border-collapse: collapse;
margin-left: 3px;
}

td.lb_ml {
height: 21px;
width: 104px;
border: 1px black solid;
background: #D0D0D0;
padding-left: 5px;
font-weight: bold;
font-size: 14px;
}

td.lb_sl {
width: 86px;
border: 1px black solid;
background: #B0B0B0;
padding: 2px 0px 2px 15px;
font-weight: bold;
font-size: 12px;
}
</style>

</head>

<body>

<center>
<table class=tb_lb>
<tr><td class=lb_ml>Link 1</td></tr>
<tr><td class=lb_ml>Link 2</td></tr>
<tr><td class=lb_ml>Link 3
<tr><td>
<table class=tb_internal_lb>
<tr><td class=lb_sl>Sublink1</td></tr>
<tr><td class=lb_sl>Sublink2</td></tr>
<tr><td class=lb_sl>Sublink3</td></tr>
</table>
</td></tr>
<tr><td class=lb_ml>Link 4</td></tr>
<tr><td class=lb_ml>Link 5</td></tr>
<tr><td class=lb_ml>Link 6</td></tr>
</table>
</center>

</body>
</html>

Neredbojias · May 11, 2006

To further the education of mankind, (e-mail address removed) vouchsafed:

I have a table in which I'm using css to set up the options of the
page, and I cannot get the spacing to do what I want.

In the following html page, I would like for the table with Sublink1,
2, and 3 to be directly against Link 3. Right now there is a gap of
about 5 pixels. I would appreciate any suggestions on how to resolve
this:

Try <table cellspacing="0" cellpadding="0"....

Martin Jay · May 11, 2006

In message said:
I have a table in which I'm using css to set up the options of the
page, and I cannot get the spacing to do what I want.

In the following html page, I would like for the table with Sublink1,
2, and 3 to be directly against Link 3. Right now there is a gap of
about 5 pixels. I would appreciate any suggestions on how to resolve
this:

Your problem is that by default your "tb_lb" main table has the
attribute:

border-collapse: separate;

This is what gives you the white boarder around each box and, of course,
you also get an unwanted border at the bottom of the first three boxes.
Changing it to:

border-collapse: collapse;

would simply bunch all of the boxes together.

Why don't you use everyone's friend: the unordered list? Something like
the example I've pasted below gives you the same effect as your table
design. I've kept the general layout similar to yours so that you can
understand the modifications. I've also changed the font sizes from px
to em to avoid text sizing problems with everyone's favourite browser.

<html>
<head>
<title></title>
<style type="text/css">
body {
margin-top: 30px;
font-family: Arial, sans-serif;
}

ul.tb_lb {
margin: 0;
padding: 0;
list-style-type: none;
}

ul.tb_internal_lb {
margin: 0;
padding: 0;
list-style-type: none;
}

li.lb_ml {
width: 104px;
border: 1px black solid;
background: #D0D0D0;
padding-left: 5px;
font-weight: bold;
font-size: 1em;
margin-top: 3px;
text-align: left;
}

li.lb_sl {
width: 86px;
border: 1px black solid;
background: #B0B0B0;
padding: 2px 0px 2px 15px;
font-weight: bold;
font-size: .8em;
margin: 0;
text-align: left;
}
</style>
</head>

<body>

<center>

<ul class=tb_lb>
<li class=lb_ml>Link 1<//li>
<li class=lb_ml>Link 2</li>
<li class=lb_ml>Link 3</li>
</ul>

<ul class=tb_internal_lb>
<li class=lb_sl>Sublink1
<li class=lb_sl>Sublink2
<li class=lb_sl>Sublink3
</ul>

<ul class=tb_lb>
<li class=lb_ml>Link 4</li>
<li class=lb_ml>Link 5</li>
<li class=lb_ml>Link 6</li>
</ul>

</center>

</body>
</html>

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Having trouble centering contents of td ?	3	May 2, 2023
Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
Interfering CSS	1	Feb 9, 2024
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Image shifts to the right when export the page to pdf	4	May 5, 2023
Help needed with thank you message	5	Sep 11, 2021
I need help fixing my website	2	Oct 15, 2023

css table borders and spacing

kemton

Neredbojias

Martin Jay

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads