I have a table in a webpage that sometimes has empty cells. When viewed on my Firefox browser on my laptop it draws the border of those cells even if they are empty. When I view it on my iPad3 Safari browser it does not.
I discovered CSS empty-cells:show which I thought might be the solution, although the doc did suggest that show was the default. I thought perhaps the iPad browser could have a different default, so I tried it, but it made no difference.
Does the Safari browser on the iPad3 pay any attention to CSS empty-cells:show? Is there something else I should be doing to have borders round my empty cells? I have no access to the html in this case, so I can't add a into the empty cells to make them non-empty, so I need a CSS solution (or confirmation that there is no CSS solution).
table {
empty-cells: show;
}
td {
border-bottom: 1px blue inset;
border-left: 1px blue inset;
border-spacing: 1px 1px;
} <html>
<head>
</head>
<body>
<table>
<tr>
<td>test data</td>
<td>more data</td>
<td></td>
<td>after the empty cell</td>
</tr>
<tr>
<td>test data</td>
<td>more data</td>
<td>and more</td>
<td>after the empty cell</td>
</tr>
</table>
</body>
</html>
Add the following property to your table. border-collapse: collapse; This will draw the border for all cells even if they are empty. Should work on Safari too.