Solved

How to make unfilled table cell border still have solid boder line?

Posted on 2004-08-11
17
1,314 Views
Last Modified: 2008-03-10
In HTML table, if I set boder=1, all table cells should have boders. But for those cells which I don't have any text content, like the (1,2) in the following sample, the boders are greyed out. This dosen't look good in my web page. Does anybody know how to make all cells have the same kind of boders with style sheet no matter whether they have cell content or not?

<html>
<head>
<title></title>
</head>
<body>
<table cellspacing=0 cellpadding=0 width="100%" border=1 style="border-style:inset">
      <tr>
            <td>1</td>
            <td></td>
            <td>3</td>
      </tr>
      <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
      </tr>
</table>
</body>
</html>
0
Comment
Question by:BruceCheng
  • 5
  • 4
  • 3
  • +3
17 Comments
 
LVL 33

Expert Comment

by:snoyes_jw
ID: 11777891
A common solution is to put &nbsp; inside those empty cells.
0
 
LVL 1

Author Comment

by:BruceCheng
ID: 11777990
I know that. But my table data are read from database. By that way, I need to use IF statement to check every data to see whether it's empty. If it's empty, I append a space to it.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11778097
Hi

You could of course have something like this:

<style type="text/css">
td {border:1px outset gray;}
</style>

Regards,
Zyloch
0
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.

 
LVL 1

Author Comment

by:BruceCheng
ID: 11778195
I tried it like the following. It doesn't help.

<html>
<head>
<title></title>
<style type="text/css">
td {border:1px outset gray;}
</style>
</head>
<body>
<table cellspacing=0 cellpadding=0 width="100%" border=0>
      <tr>
            <td>1</td>
            <td></td>
            <td>3</td>
      </tr>
      <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
      </tr>
</table>
</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11778412
Have you tried:

td {empty-cells: show;}
0
 
LVL 1

Author Comment

by:BruceCheng
ID: 11778485
I just tried it. It doesn't help. By the way, I am using IE.

That empty-cells is not a valid style sheet property.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11778911
empty-cells is a valid stylesheet property. IE just doesn't understand it.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11778929
Well when you mix old style tag attributes with style properties it does not always coe out the way you think it should.  If you are going to use CSS; then USE IT down just play around a little.  This works for both IE and Mozilla:

<html>
<head>
<title></title>
<style type="text/css">
td {border:1px inset black}
table {border-collapse:collapse;border:1px inset black;width:100%}
</style>
</head>
<body>
<table cellpadding=0>
     <tr>
          <td>1</td>
          <td></td>
          <td>3</td>
     </tr>
     <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
     </tr>
</table>
</body>
</html>

Cd&
0
 
LVL 2

Accepted Solution

by:
Joakim_ earned 50 total points
ID: 11781413
Try this:

<html>
<head>
<title></title>
<style type="text/css">
td {border:1px inset black}
table {border-collapse:collapse;border:1px inset black;width:100%}
</style>
</head>
<body>
<table cellpadding=0>
     <tr>
          <td>1</td>
          <td></td>
          <td>3</td>
     </tr>
     <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
     </tr>
</table>
</body>
</html>



Or if you want to use your own HTML code, just add style="border-collapse: collapse" to the TABLE element. Here's the whole code:

<html>
<head>
<title></title>
</head>
<body>
<table cellspacing=0 cellpadding=0 style="border-collapse: collapse" width="100%" border=1 style="border-style:inset">
     <tr>
          <td>1</td>
          <td></td>
          <td>3</td>
     </tr>
     <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
     </tr>
</table>
</body>
</html>
0
 
LVL 2

Expert Comment

by:Joakim_
ID: 11781420
Oops. The code after "Try this:" Was wrong. Here's the code I meant to give you:

<html>
<head>
<title></title>
<style type="text/css">
table, tr, td {
      border: 1px solid #000000;
      border-collapse: collapse
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="100%">
     <tr>
          <td>1</td>
          <td></td>
          <td>3</td>
     </tr>
     <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
     </tr>
</table>
</body>
</html>
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11785164
Hi BruceCheng,
The answer you accepted is basically a repeat of the previous comment - could you explain why you chose the second one?

Thanks,
Sean Powell
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11785480
Joakim,

Unless you have an explanation for your theft in cut and pasting my comment, and then re-posting the slightly re-arranged versions of my solution, I will ask admin to review your behaviour; and I will do my best to get you thrown off the site.

Cd&
0
 
LVL 2

Expert Comment

by:Joakim_
ID: 11785748
COBOLdinosaur, you have maybe not noticed it, but the code I posted in my second post is different from yours. I copied because I was too lazy to write the HTML table. The CSS code in my post gives a different border style, and I added more attributes to the TABLE-element, more attributes, that could be found in BruceCheng's original code.

And as you both see, COBOLdinosaur and seanpowell, he did not accept the post with the corrected code, wich means he must have used the second example in my first post. It contains the same as BruceCheng's original code, except for the STYLE-attribute that I added, and COBOLdinosaur's code didn't contain that. COBOLdinosaur's code includes "border-collapse: collapse" in the document's head section, while I put it in the STYLE-attribute in the TABLE-element.
0
 
LVL 2

Expert Comment

by:Joakim_
ID: 11785765
And by the way, BruceCheng, thank you for accepting my little solution.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11786469
Joakim_,

So I guess what you are saying is that you had this brilliant idea of using border-collapse, all on your own, and your answer is different because all the other stuff around it is what is important really important even though none of the other stuff is what solves the problem; and where the boder-collapse is placed does not change anything either.

Email sent to admin.

If it was unintentional all you had to do was say sorry and we could have moved on; instead you try and claim that 1+1=3.

Cd&
0
 
LVL 2

Expert Comment

by:Joakim_
ID: 11788507
Please don't get angry because of this. I have nothing to say sorry for, and I have no reason to do anything mean to you. Be rational; you are strong here on Experts Exchange, you have a lot of points, and have answered a lot of questions. You can stand not earning 50 points. I have few points. Let me rise, and I will be more reasonable when answering questions. If you withdraw the complaint, I will look at it as a favour, and I will maybe do you a favour later.

Thank you,
Joakim_
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11788845
You just don't get it.  Points don't mean a thing.  Ethical behaviour, professional conduct, and integrity are not measured in points.  Ranking does not equate to respect. I suspect you do not understand what I am saying because it does not fit with what you want.

Sad... very sad :^(

BTW,

I am not angry.  Just disappointed, that you fail to grasp what this site is really about.


Cd&
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

856 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