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