CODEWITHSUNDEEP
javascripthtmlcsssafari
MSC
MSC

Reputation: 3386

Mac Safari single TABLE is 1px wide even when empty

It is weird that a small TABLE with zero width works in all browsers except Safari on Mac: 

<table cellspacing="0" cellpadding="0" width="0" height="30" style="width: 0px; height: 30px; background-color: red">
  <tr>
    <td width="0" height="30" style="width: 0px; height: 30px; background-color: yellow"></td>
  </tr>
</table>

All browsers keep this hidden apart from Safari on Mac which shows up as a 1px wide yellow line in Safari 9 (or red line in Safari 6). See https://jsfiddle.net/0q1L7fa1/8/

For the purposes of our program, this table needs to be visible (when the user drags an associated handle), so other than having Javascript / jQuery set it to "display: none" when "width == 0", has anyone got a more elegant fix?

Upvotes: 0

Views: 97

Answers (2)

Ivan Li
Ivan Li

Reputation: 1950

table{ table-layout:fixed; width: 0; }

This can fix the table width regardless of the child elements in Safari

Upvotes: 1

Mr Alihoseiny
Mr Alihoseiny

Reputation: 1239

Adding "max-width:0;"to the table in css file maybe help you. The code can be like :

table{max-with : 0}

and then you can change this with user's events with javascript or jquery.

Upvotes: 0

Related Questions