CODEWITHSUNDEEP
htmlcss
hulufei
hulufei

Reputation: 767

IE table cell border bug with colspan set

I have the following sample table:

<table>
    <thead>
        <tr>
            <th>t1</th>
            <th>t2</th>
            <th>t3</th>
            <th>t4</th>
            <th>t5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5">Colspan=5 here</td>
        </tr>
    </tbody>
</table>

And here is the simple CSS code:

table {
    border-collapse: collapse;
    border-spacing: 0;
}
th, td {
    border: 1px solid #000;
}

The weird thing is the bottom border after first th disappeared, here is a screenshot:

IE cell border bug

When I switch to another window and switch back to IE, the table refresh as normal. For the convenient, I create a jsFiddle: http://jsfiddle.net/hulufei/3dxt2/9/

This effect IE10, 9, 8. Is there a fix for this bug in IE?

Upvotes: 2

Views: 4085

Answers (2)

hulufei
hulufei

Reputation: 767

Change the style code as this seems solve the problem:

table {
    border-collapse: collapse;
    border-spacing: 0;
    border-top:1px solid #000;
    border-left:1px solid #000;
}
th, td {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

Upvotes: 3

Rajdeep Singh
Rajdeep Singh

Reputation: 17834

<table>
<thead>
    <tr>
        <th>t1</th>
        <th>t2</th>
        <th>t3</th>
        <th>t4</th>
        <th>t5</th>
    </tr>
</thead>
<tbody>
  <tr>
    <td colspan="5">Colspan=5 here</td>
  </tr>
</tbody>

Upvotes: 0

Related Questions