CODEWITHSUNDEEP
html
Tom Cruise
Tom Cruise

Reputation: 1415

Create HTML Table

I had created a sample HTML for Table where I have 3 columns and 2 rows.

    <!DOCTYPE html>
<html>
<body>
    <table border='1' width='400px' cellspacing="0" cellpadding="2" height='100%' style='color: black;'>
        <tr style='color: #fff; background: black;'>
            <th>column1</th>
            <th>column2</th>
            <th>column3</th>
        </tr>
        <tr>
            <td></td><td> </td><td> 1234</td>
        </tr>
        <tr>
            <td> 190</td><td> 2</td><td>454545</td>
        </tr>
    </table>
</body>
</html>

The table created successfully but the separator is missing between the columns where the data is not available. This issue occured only in IE, in Mozilla it works fine. Can anyone help me to find out a solution for this? Printscreen

Upvotes: 1

Views: 217

Answers (3)

Linga
Linga

Reputation: 10553

You can fix this by defining exact border style for both table as well as td tags, by doing this you prevent browser from applying its own styling. Remove border='1' and define

table {
border: 1px solid #3C2610;
}

td {
border: 1px solid #3C2610;
}

The cell dosn't exist in some IE's unless it's filled with something. If you can put a &nbsp; (non breaking space) to fill the void, that will usually work.

Apparently, IE8 shows the cells by default, and you have to hide it with empty-cells:hide But it doesn't work at all in IE7 (which hides by default)

Another solution is adding these two attributes to the table element: frame="box" and rules="all" like this:

<table border="1" cellspacing="0" frame="box" rules="all">

Upvotes: 1

Krish R
Krish R

Reputation: 22711

Try adding &nbsp; in between td tag, such as <tr><td>&nbsp;</td><td>&nbsp;</td><td> 1234</td></tr> in HTML

Upvotes: 0

russellc
russellc

Reputation: 494

Would putting a non breaking space (&nbsp;) into the empty column work?

Upvotes: 0

Related Questions