/    Sign up×
Community /Pin to ProfileBookmark

Table Border Problem

Copy linkTweet thisAlerts:
Jan 24.2009

[URL=”http://www.plant52.com/images/tableproblem.png”]Example[/URL]

I can’t for the life of me find out how to fully remove the white border and just have the cells directly touching. My current CSS for the table is as follows:

[CODE]table.nopad {
width: 100%;
border-collapse: collapse;
padding: 0;
margin: 0;
margin-bottom: 15px;
}[/CODE]

I have tried setting the border to equal zero in the html as well. Any tips on how I could go about this?

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 24.2009 — Setting [I]line-height:0.6;[/I] will scrunch things up.
Copy linkTweet thisAlerts:
@jetsirusauthorJan 24.2009 — Thanks for the tip.. Unfortunately it doesn't effect the dividing white line at all. Just crushes the text together. This is really starting kill me. I have been working on this one issue for a couple of days. I have tried <div> with varying bits of success. The problem comes from the fact that I am trying to take a single cell in a table that displays all the main content for my page and give it a image border and background. Since a cell can only have one background I tried putting a 9 cell table in that cell.

That actually worked except for the horrid, pattern ending white lines dividing them. So I decided to try using <div>. Oh wow.... Talk about confusing. It takes 9 nested <div>s, but the catch is, unless they are nested just so, formatting the border and border corners becomes impossible. Once I get them nested correctly, I can't get the center <div> to get in position. Since this needs to be in a cell, deep in the page, I can't use fixed positioning, and I can't get the hang of how relative positioning works. Let me post the code, and then and example of what I am looking for.

[code=php]<table class="nopad">
<tr valign="top">
<td class="tblmainpane">
<div id="mainpane_tr"></div>
<div id="mainpane_tm"></div>
<div id="mainpane_tl"></div>
<div id="mainpane_l"></div>
<div id="mainpane_r"></div>
<div id="mainpane_br"></div>
<div id="mainpane_b"></div>
<div id="mainpane_bl"></div>
<divid="mainpane_c">
<jdoc:include type="component" />
<jdoc:include type="modules" name="footer" style="xhtml"/>
</div>
</td>
<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
<td class="greyline">&nbsp;</td>
<td class="tblpollpane" width="170">
<jdoc:include type="modules" name="right" style="xhtml"/>
</td>
<?php endif; ?>
</tr>
</table>[/code]

The "mainpane" divs are the doing the magic here.

[CODE]/* MainPane Border */



#mainpane_tl {

background: url(../images/scroll/scroll_tl.png) 0 0 no-repeat;

position: absolute;

height: 20px;

width: auto;

top: 0;

right: 0;

bottom: auto;

left: 0;

bottom: auto;

}



#mainpane_t {

background: url(../images/scroll/scroll_t.png) 0 0 repeat-x;

position: absolute;

width: auto;

height: 20px;

top: 0;

right: 20px;

bottom: auto;

left: 20px;

}



#mainpane_tr {

background: url(../images/scroll/scroll_tr.png) 100% 0 no-repeat;

position: absolute;

width: auto;

height: 20px;

top: 0;

right: 0;

bottom: auto;

left: 0;

}



#mainpane_r {

background: url(../images/scroll/scroll_r.png) 100% 0px repeat-y;

position: absolute;

width: auto;

height: auto;

top: 20px;

right: 0;

bottom: 20px;

left: 0;

}



#mainpane_br {

background: url(../images/scroll/scroll_br.png) 100% 0 no-repeat;

position: absolute;

width: auto;

height: auto;

top: auto;

right: 0;

bottom: 0;

left: 0;

}



#mainpane_b {

background: url(../images/scroll/scroll_b.png) 0 0% repeat-x;

position: absolute;

width: auto;

height: 20px;

top: auto;

right: 20px;

bottom: 0;

left: 20px;

}



#mainpane_bl {

background: url(../images/scroll/scroll_bl.png) 0 100% no-repeat;

position: absolute;

width: auto;

height: 20px;

top: auto;

right: 0;

bottom: o;

left: 0;

}



#mainpane_l {

background: url(../images/scroll/scroll_l.png) 0 0 repeat-y;

position: absolute;

width: auto;

height: auto;

top: 20px;

right: 0;

bottom: 20px;

left: 0;

}



/* MainPane Content Area */

#mainpane_c {

background: url(../images/scroll/background.png);

position: absolute;

width: auto;

height: auto;

top: 20px;

right: 20px;

bottom: 20px;

left: 20px;

}
[/CODE]

The "position:absolute" is there just so I can get all the borders in the right place.. Which I can't. If I change that with relative, it goes back into the cell it's supposed to be in. But it gets all jumbled up.
Copy linkTweet thisAlerts:
@jetsirusauthorJan 24.2009 — Oh, wow, I think that is the link I was looking for. Let me go over it, and I will let you know how it goes.

Thanks!
×

Success!

Help @jetsirus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...