empty-cells on iPad browser

Question

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>

Could you include the code for your table as well as the CSS pertaining to that table (including the empty-cells declaration)? — BoltClock, Apr 24 '15 at 08:21
Added code as requested. Interestingly when I view THIS page via my iPad, it displays correctly and yet the same html and CSS outside of SO does not. What gives? — Morag Hughson, Apr 24 '15 at 15:49

score 0 · Answer 1 · answered Aug 12 '16 at 16:47

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.

table {
    empty-cells: show;
    border-collapse: collapse;
}
td {
    border-bottom:  1px blue inset;
    border-left:    1px blue inset;
   border-spacing: 1px 1px;
}

empty-cells on iPad browser

1 Answers1