Solved

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

Posted on 2004-08-11
17
1,304 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
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…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

705 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now