表格比手机屏幕宽时不压缩，可左右滚动，格子内容不换行
生活随笔
收集整理的這篇文章主要介紹了
表格比手机屏幕宽时不压缩，可左右滚动，格子内容不换行
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Bootstrap響應(yīng)式表格比較寬時，為適應(yīng)手機(jī)屏幕寬度，會自動對各列進(jìn)行壓縮，內(nèi)容分多行顯示。但像姓名分幾行顯示效果不好。我們希望表格顯示不下時，不改變列寬度，而是出現(xiàn)滾動桿，保持表格原來的外觀。
可通過設(shè)置white-space: nowrap屬性來實(shí)現(xiàn)。
CSS 樣式代碼：
用于禁止格子內(nèi)換行。
HTML代碼：
<div class="table-responsive"><table class="table table-bordered cell_nowrap" ><!-- 表頭 --><thead><tr><th>年級</th><th>學(xué)生</th><th>題目</th></tr></thead><tbody><!-- 表格內(nèi)容 --><tr><td>2019</td><td>張小三</td><td>文字不換行在手機(jī)上的顯示,顯示不下時自動出現(xiàn)滾動條</td></tr><tr><td>2019</td><td>趙小四</td><td>文字不換行在手機(jī)上的顯示,顯示不下時自動出現(xiàn)滾動條</td></tr><tr><td>2019</td><td>王小五</td><td>不會出現(xiàn)姓名欄變窄豎排</td></tr></tbody></table> </div>這里用的是Bootstrap4，類table-responsive、table使表格成為響應(yīng)式表格，會根據(jù)屏幕大小自適應(yīng)顯示。
完整代碼如下，可在服務(wù)器上運(yùn)行顯示效果。
<html> <head><meta charset="UTF-8" ><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"><title>表格單元內(nèi)容不換行</title><!-- Bootstrap4 CSS --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><!-- 自定義樣式 --><style>.cell_nowrap {white-space: nowrap;}</style> </head><body><div class="container"><div class="table-responsive"><table class="table table-bordered cell_nowrap" ><!-- 表頭 --><thead><tr><th>年級</th><th>學(xué)生</th><th>注釋</th></tr></thead><tbody><!-- 表格內(nèi)容 --><tr><td>2019</td><td>張小三</td><td>文字不換行在手機(jī)上的顯示,顯示不下時自動出現(xiàn)滾動條</td></tr><tr><td>2019</td><td>趙小四</td><td>文字不換行在手機(jī)上的顯示,顯示不下時自動出現(xiàn)滾動條</td></tr><tr><td>2019</td><td>王小五</td><td>不會出現(xiàn)姓名欄變窄豎排</td></tr></tbody></table></div></div> </body></html>總結(jié)
以上是生活随笔為你收集整理的表格比手机屏幕宽时不压缩，可左右滚动，格子内容不换行的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python基础_第2章_Python运
- 下一篇： 关于组件之间使用provide和inje