table中table-layout;word-wrap、word-break;nowrap="nowrap";


全文總結,內容優先使用寬度;table-layout指定了各部分寬度,且向下有繼承性,遇到合並單元格時怎么破;word-wrap 和word-break解決超長文本在規定的框中顯示溢出怎么辦;

 

一般屬性總結

邊框屬性border(table)

間距屬性cellpadding cellpacing  padding

字體屬性font

文本屬性text-align text-index vertical-align

背景屬性backgrond 顏色 /圖片 位置 重復

td和table的邊框可以單獨設置

.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

詳細介紹特殊屬性應用

例一

常見問題,主要內容優先使用寬度。

nowrap="nowrap"用於td,規定表格單元格的內容不換行。

white-space:nowrap用於css,規定段落中的文本不換行。

<tr>
<td style="white-space:nowrap">Never increase, beyond what is necessary,</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>

 

table-layout屬性

用法:作用於table標簽,顯示單元格列寬的計算法則。

取值:auto(默認)列寬由內容確定。加載慢

        fixed。並設置第一行單元格寬度,之后的每一行單元格按照第一行的尺寸進行設定。加載快。

常見問題,第一行設置單元格合並后,第二行的寬度顯示為平分。

解決辦法,加一個隱形行設定為第一行,display:none;

<table border="1" style="table-layout:fixed;width:200px;">
<tr display="none">
<td style="width:30%"></td>
<td style="width:20%"></td>
<td style="width:50%"></td>
</tr>
<tr>
<td style="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td>a</td>
<td style="20%">b20%</td>
<td style="50%">b50%</td>
</tr>
</table>

常見問題,單元格內容溢出

word-wrap:break-word是否允許瀏覽器在單詞內進行斷句。對於長單詞,首先嘗試移入下一行,若仍然溢出,斷句。

word-break:all-break怎樣進行單詞內的斷句。直接簡單粗暴單詞內斷句。原樣式加word-wrap:break-word加word-break:break-all;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM