StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStrange problem with border collase and border left/right
primarykey
Id
1757628
data
AcceptedAnswerId
1757787
AnswerCount
2
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2009-11-18T17:19:26.170
FavoriteCount
0
LastActivityDate
2009-11-18T17:42:24.750
LastEditDate
LastEditorUserId
0
OwnerUserId
176180
ParentId
0
PostTypeId
1
Score
0
ViewCount
933
LastEditorDisplayName
text
Body
I have some strange problem with table in Firefox. What I want to create is to create a grid and think border. Here is the mock up (thanks inkscape). <a href="http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Mockup.png" rel="nofollow noreferrer">Mockup http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Mockup.png</a> Here is my code: <pre><code><style> .mytable { border-collapse: collapse; } .mytd { width : 1.3em; border : 1px solid black; padding : 0px; margin : 0px; text-align : center; } .mytd-top { border-top: 3px solid black; } .mytd-bottom { border-bottom: 3px solid black; } .mytd-left { border-left: 3px solid black; } .mytd-right { border-right: 3px solid black; } </style> <table class="mytable"> <tr><td class="mytd mytd-top mytd-left">1</td><td class="mytd mytd-top" >2</td><td class="mytd mytd-top mytd-right">3</td></tr> <tr><td class="mytd mytd-left">4</td><td class="mytd" >5</td><td class="mytd mytd-right">6</td></tr> <tr><td class="mytd mytd-bottom mytd-left">7</td><td class="mytd mytd-bottom">8</td><td class="mytd mytd-bottom mytd-right">9</td></tr> </table></code></pre> The above code should give me what I want but it does not. There seems to be problem with border left and right when <code>border-colllapse</code> is <code>colllapse</code>. The above mode get me: <a href="http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img1.png" rel="nofollow noreferrer">Img 1 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img1.png</a> No outer border!!! <hr> Notice there are three lines in bold. The problem seems to be only to left and right and NOT top and bottom. If the three lines are: <pre><code>.mytable { border-collapse: collapse; } .mytd-left { } .mytd-right { }</code></pre> I get: <a href="http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img2.png" rel="nofollow noreferrer">Img 2 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img2.png</a> No problem for top and bottom. <hr> If the three lines are: <pre><code>.mytable { border-collapse: collapse; } .mytd-left { border-left: 3px solid black; } .mytd-right { }</code></pre> I get: <a href="http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img3.png" rel="nofollow noreferrer">Img 3 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img3.png</a> The problem seems to be isolate left and right. <hr> If the three lines are: <pre><code>.mytable { } .mytd-left { border-left: 3px solid black; } .mytd-right { border-right: 3px solid black; }</code></pre> I get: <a href="http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img4.png" rel="nofollow noreferrer">Img 4 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img4.png</a> Without <code>collapse</code> all border shows as expected. <hr> What is going on here? Is there a work around? a replacement for <code>collapse</code>? I only target FF (internal project) so I don't really care if it work in other browser or not. Thanks in advance.
Tags
<html><css>
Title
Strange problem with border collase and border left/right
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USNawaMan
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.