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