• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1335
  • Last Modified:

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

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
BruceCheng
Asked:
BruceCheng
  • 5
  • 4
  • 3
  • +3
1 Solution
 
snoyes_jwCommented:
A common solution is to put &nbsp; inside those empty cells.
0
 
BruceChengAuthor Commented:
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
 
ZylochCommented:
Hi

You could of course have something like this:

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

Regards,
Zyloch
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
BruceChengAuthor Commented:
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
 
seanpowellCommented:
Have you tried:

td {empty-cells: show;}
0
 
BruceChengAuthor Commented:
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
 
seanpowellCommented:
empty-cells is a valid stylesheet property. IE just doesn't understand it.
0
 
COBOLdinosaurCommented:
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
 
Joakim_Commented:
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
 
Joakim_Commented:
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
 
seanpowellCommented:
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
 
COBOLdinosaurCommented:
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
 
Joakim_Commented:
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
 
Joakim_Commented:
And by the way, BruceCheng, thank you for accepting my little solution.
0
 
COBOLdinosaurCommented:
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
 
Joakim_Commented:
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
 
COBOLdinosaurCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 5
  • 4
  • 3
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now