＜table/＞默认适应内容宽度造成滚动条不显示的解决方法
生活随笔
收集整理的這篇文章主要介紹了
＜table/＞默认适应内容宽度造成滚动条不显示的解决方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、現象重現
<html><head></head><body> <table style="width: 100%;"> <tbody> <tr> <td style="width: 50%;overflow-x:auto"> <pre> 瞎子打燈籠一個盲人到親戚家做客，天黑后，他的親戚好心為他點了個燈籠，說：“天晚了，路黑，你打個燈籠回家吧！”盲人火冒三丈地說：“你明明知道我是瞎子，還給我打個燈籠照路，不是嘲笑我嗎？”他的親戚說：“你犯了局限思考的錯誤了。你在路上走，許多人也在路上走，你打著燈籠，別人可以看到你，就不會把你撞到了。”盲人一想，對呀！ 故事的第一節告誡我們，局限思考是從自己的角度思考， 整體思考是你把自己放到整個環境中去考慮。系統地思考問題，就會發現，你的行為會對別人產生互動。 </pre> </td> <td style="width: 50%;overflow-x:auto"> <pre> 瞎子打燈籠一個盲人到親戚家做客，天黑后，他的親戚好心為他點了個燈籠，說：“天晚了，路黑，你打個燈籠回家吧！”盲人火冒三丈地說：“你明明知道我是瞎子，還給我打個燈籠照路，不是嘲笑我嗎？”他的親戚說：“你犯了局限思考的錯誤了。你在路上走，許多人也在路上走，你打著燈籠，別人可以看到你，就不會把你撞到了。”盲人一想，對呀！ 故事的第一節告誡我們，局限思考是從自己的角度思考， 整體思考是你把自己放到整個環境中去考慮。系統地思考問題，就會發現，你的行為會對別人產生互動。 </pre> </td> </tr> </tbody> </table> </body> </html>表格會超出窗體的寬度產生了容器的滾動條，而td中的兩個文本沒有產生滾動條。
沒有達到以下的效果：
?
二、分析原因
原來是<table>默認的css樣式是table-style:auto;
在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。
將<table>的css改為table-style:fixed;，td中的兩個文本產生滾動條了。
?
總結
以上是生活随笔為你收集整理的＜table/＞默认适应内容宽度造成滚动条不显示的解决方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 滴滴自动驾驶再获10亿+融资，滴滴在下一
- 下一篇： 实用篇！学会这些，再也不为带鸡消毒犯愁！