3 Replies - 101 Views - Last Post: 27 May 2019 - 03:35 AM

#1 Col_Boogie   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 26-May 19

Borders inside Borders remove separation

Posted 26 May 2019 - 09:52 AM

In style I have:
 table    {border-collapse: collapse; margin:0;padding:0;}
and
.RB    {border:medium solid red;}

I also have a table inside a <td> (
<td class='RB'><table class='RB'>
)
The problem is that there is a visible gap between the outer border and inner border
How do I make that gap go away?
Frankly I'd like the code
<td style="border:none"><table>...</table><td>...</td>
to have the border on top align, but the gap causes the first top border to be lower than the first
Any ideas?

Is This A Good Question/Topic? 0
  • +

Replies To: Borders inside Borders remove separation

#2 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6796
  • View blog
  • Posts: 28,083
  • Joined: 12-December 12

Re: Borders inside Borders remove separation

Posted 26 May 2019 - 11:03 PM

I would first encourage you to avoid nested tables, are they really necessary?

Also, the second fragment is broken HTML, so I suggest that you provide a more complete example. Broken HTML would interfere with CSS.
Was This Post Helpful? 0
  • +
  • -

#3 Col_Boogie   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 26-May 19

Re: Borders inside Borders remove separation

Posted 27 May 2019 - 03:28 AM

more complete code
    <table class='W100 T'>
<tr>    <td><table class='RB'>
<tr>    <td class='WV'><a href='CatNews.html' target='_blank'>Major News Categories<br>
        <img class='Block' src='WorldNews.png' alt="Major News Categories"></a></td>
    <td class='WV'><a href='Election.html' target='_blank'>Election 2020<br>
        <img class='Block' src='Election.png' alt="Election 2020"></a></td></tr>
<tr>    <td class='WV'><a href='CatNews.html' target='_blank'>Media Trump<br>
        <img class='Block' src='TrMedia.png' alt="Media Trump"></a></td>
    <td class='WV'><a href='Topic.html' target='_blank'>Other Topics<br>
        <img class='Block' src='Q-mark.png' alt="Other Topics"></a></td></tr></table></td>
    <td rowspan='2' class="W50 RB">Headline News
    <!--#include file="TopPosts.txt"-->
    </td></tr></table>

The include is code copied into second <td>
The nested tables simplified code a lot
The first table above is also nested inside a bigger table
I do not know what you mean by broken HTML, if there is a problem with it, it should be documented in HTML or CSS manuals.
Was This Post Helpful? 0
  • +
  • -

#4 Col_Boogie   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 26-May 19

Re: Borders inside Borders remove separation

Posted 27 May 2019 - 03:35 AM

I have sort of a fix by changing .RB to
.RB td  {outline:medium solid red;border:10px solid white;}
However, that has a browser problem. Documentation says the outline should be outside the <td> and the border inside the <td>, but the border is on both sides of the outline. Yes, the border is a little thick, but had to make it ticker in order to see it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1