IE8 has a right table border problem on JavaScript-inserted cells

If you use collapsed table borders on with IE8 and insert or delete cells in the table with JavaScript, the right border will be missing. For example, when you insert a row in a table this CSS ...

.fmtTable { border-collapse: collapse; width: 100%; border: 1px solid #D0BFAB; }

... with the following jQuery code ...

$("<tr><td colspan='2'>Test</td></tr").insertBefore("table.fmtTable tr:last");

... the right border will disapper.

Fix: declare an extra class last ...

table.fmtTable .last { border-right: 1px solid #D0BFAB; }

... and apply it to every last cell in the table:

$("table.fmtTable tr").find("td:last").addClass("last");

No comments:

Post a Comment