怎么設(shè)置table(表格)手機(jī)端自適應(yīng)寬度

IT視頻資源分享列表IT視頻資源分享列表，分享是一種積極的生活態(tài)度！！！https://mp.weixin.qq.com/s/HqeXW1T_Ftx7CI1wvMTPfQ我們?cè)趙ordpress文章頁面經(jīng)常會(huì)用到表格，有些是從其他網(wǎng)頁或者文檔復(fù)制粘貼過來的，在電腦設(shè)備網(wǎng)頁上都能很好的展示，但是在移動(dòng)設(shè)備上或者低分辨率設(shè)備上卻經(jīng)常撐破列寬，很是影響美觀和客戶體驗(yàn)。這里就這個(gè)問題分享一下解決的方法。

以下面這個(gè)表格為例：

表格范例-周杰倫jay專輯《范特西》專輯曲目

正確的（自適應(yīng)寬度）代碼如下：

可以看到上面代碼中關(guān)于定義Table(表格)屬性的代碼是：

經(jīng)常見到的非自適應(yīng)寬度的代碼，也就是在移動(dòng)端會(huì)撐破列寬的代碼則是：

看出來區(qū)別沒有，關(guān)于style和width的設(shè)置不一樣！

總結(jié)：在定義表格時(shí)，width（整個(gè)表格的寬度）不要設(shè)置為固定數(shù)值，定義為百分比類型，例如90%或者95%；再追加style="Table-layout:fixed;"，這樣做可以使半角連續(xù)字符強(qiáng)制換行，不至于撐破列寬。需要注意的是，使用此參數(shù)后，不要輕易在tr(行)或td(列)中加入height屬性，會(huì)使table不再被內(nèi)容撐出適合的高度。做到這兩點(diǎn)之后，你table(表格)在任何情況下都可以很好的自適應(yīng)寬度顯示了。

補(bǔ)充一下，上面定義table(表格)參數(shù)的意思，border：表格的線寬為1；cellspacing：表格內(nèi)數(shù)據(jù)與表格間隔為0；cellpadding：?jiǎn)卧衽c單元格間隔為2。

視頻

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

相關(guān)文章

寵物展會(huì)2025年時(shí)間表

1420 2025-04-01

wps演示添加自定義按鈕設(shè)置動(dòng)作改變按順序播放">wps演示添加自定義按鈕設(shè)置動(dòng)作改變按順序播放

1420 2025-04-01

無法插入表格

1420 2025-04-01