Hi,
I am facing an issue in Safari browser.
When you define td element with display:block and overflow:auto with specific size, a scroll bar automatically appears when the content is bigger than the defined size. This works in Chrome, Firefox, Opera, Microsoft Edge etc. But in Safari, for some reason this does not work.
Can you please suggest a css solution that can be used for the td element to achieve this effect?
div element provides the correct effect but we already have a large software code using td instead, it used to work in Safari but now it is no longer working. Instead of changing the entire code to div, trying to find a simple css solution.
Thanks for your help.
Here is a simple code snippet showing the issue:
<html>
<body>
<table>
<tr style="height:200px; width:400px;">
<td><div style="height:200px; width:200px; overflow:auto; border:1px solid black;">
This text is within a div element 200x200 in size.
When the content is bigger than the defined area, scroll bars appear as expected in all browsers.
<br/>Here is some more text to make the scroll bars appear.
<br/>Here is some more text to make the scroll bars appear.
<br/>Here is some more text to make the scroll bars appear.
<br/>Here is some more text to make the scroll bars appear.
</div></td>
<td style="height:200px; max-height:200px; width:200px; max-width:200px; overflow:auto; display:block; border:1px solid black;">
This text is within a td element 200x200 in size with display set to block and overflow auto.
When the content is bigger than the defined area, scroll bars should appear.
It works fine in Chrome, Firefox, Opera, Microsoft Edge etc.
But this expected behaviour does not work in Safari.
Safari for some reason treats this as overflow hidden.
Please let me know what css code can be used here to make scroll bars appear?
<br/>Here is some more text to make the scroll bars appear.
<br/>Here is some more text to make the scroll bars appear.
</td>
</tr>
</table>
</body>
</html>