Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2004-08-11
17
Medium Priority
?
1,327 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 200 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

885 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