CSS issue on iPad with table border

Question

I have a CSS problem when the html page is rendered on iPad. Everything works good in other browsers. The problem is that I get a small space between the cells in my tables

Answer 1

I solved this in a weird way.

First up I added a

inside of every cell which was experiencing this issue, if there is content in the cell then make sure the

is after it and does not wrap the content. I then applied the class ios-table-fix to the

and ios-table to any of the table cells ().

Then I wrote some CSS inside of media queries which target the iPad's screen resolution. First up I added the following to ios-table:

overflow: hidden;
position: relative;

Next I added the following to the ios-table-fix:

bottom: -1px;
left: -1px;
position: absolute;
right: -1px;
top: -1px;
z-index: 1;

You're going to want to apply position: relative; and z-index: 2; to any content inside of the table cells, otherwise they will disappear.

This effectively draws a new background for the table cell which overflows the border issue without changing the size of the table cell. Since it's only an iPad issue we can use CSS in the tag to avoid affecting everything.

I only tested this briefly but it seems to work without causing issues elsewhere.

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...