Solved

css table collapse

Posted on 2010-11-29
4
330 Views
Last Modified: 2012-05-10
Hi,

I was running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<p><b>Note:</b> If a !DOCTYPE is not specified, the border-collapse property can produce unexpected results.</p>
</body>
</html>

Open in new window



I have not understood


>>the border-collapse property sets whether the table borders are collapsed into a single border or separated:


please advise
0
Comment
Question by:gudii9
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 13

Accepted Solution

by:
qwerty021600 earned 167 total points
ID: 34236472
border-collapse property collapsed table borders into a single border
0
 
LVL 7

Assisted Solution

by:lexlythius
lexlythius earned 167 total points
ID: 34236578
collapsing means that TD's borders get mixed together with no spacing.

In the attached image, the second table is identical to the first one, only its borders are collapsed:


border-collapse.png
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 166 total points
ID: 34245235
You use border collapse when you want a thin line between table cells.  The other way to do this is

TABLE  { border: 1px solid green }
0
 
LVL 7

Expert Comment

by:lexlythius
ID: 34366867
The other way to do this is

TABLE  { border: 1px solid green }

That is not correct.

If you only put that style, TABLE will have a 1px outer border, but cells will have none.

If you also set the style for TDs, inner borders will be drawn, but for each cell separately (and possibly with padding between them).
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Link not working 6 42
Position Absolute Goes Beyond Parent 11 21
Regular Expression needed 4 16
close pop up windows when logout or main window closes 17 52
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question