table樣式測試總結tr td寬度分析

題外話：一直以來習慣布局用ul,li樣式調整比較方便，不會互相影響出現一些問題，but~現在公司涉及很多表格打印，都是用table寫的，好多寬度高度合並啊，組合啊~~~，單元格之間互相影響，有的樣式設置還不起作用。。。。。腦瓜疼啊！腦瓜疼~~~廢話說了一堆，擼起袖子繼續干吧！

首先定義一個基礎的table

<style>
  table tr td{
    background: #cde8e5
  }
</style>
<table style="width:600px; background-color:blue">
   <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
   </tr>       
 </table>

　　顯示效果：

注意：藍色部分不是邊框，而是table的露出來的背景色，原因是瀏覽器自帶樣式 border-spacing: 2px;每個單元格之間默認有2px的間距；

為了方便查看，保留樣式。接下第一個單元格改為“11”，如圖所示：

 

因為：第一個單元格的“11”是2個字符寬帶，第二個單元格“2”是一個字符寬帶，第三個單元格“3”是一個字符寬帶。

共計是4個字符寬帶，因此，比例為 2:1:1. 所以 第一個單元格是：600*2/4=300px. 第2和第3都是 600*1/4=150px寬度（准確寬度方便閱讀，忽略掉單元格間距影響~，以下同）

如果長度很長，超過表格寬的的情況會撐大表格寬度，如圖所示：

要想表格寬度不被撐大，單元格自動換行，可以用word-break: break-all;試試

第一個單元格50個“1”，第二個單元格25個“2”，他們的寬度比為2:1

總之，一個結論：如果不設置td寬帶，各單元格會根據各個內容長度的比例來均分table的寬度。

2、定義表格寬度為600px；第一個與第二個單元格，寬度和大於600px的情況下

<table style="width:600px; background-color:blue;">
   <tr>
     <td style="width: 400px">1111111111111111111111111111111111111</td>
     <td style="width: 400px">2</td>
     <td>3</td>
   </tr>       
 </table>

　　如圖所示：

細心的朋友肯定會想到，兩個400px，單元格寬度是1:1，那一個800px，會不會就是2:1呢，答案是肯定的

<table style="width:600px; background-color:blue;">
   <tr>
     <td style="width: 400px">1111111111111111111111111111111111111</td>
     <td style="width: 800px">2</td>
     <td>3</td>
   </tr>       
 </table>

　　如圖所示：

3、如果td寬度不足，則不足會自動補齊。下圖中，第一個100px，第二個100px，第二個td自然是：600-100-100=400px

<table style="width:600px; background-color:blue;">
   <tr>
     <td style="width: 100px">1</td>
     <td style="width: 100px">2</td>
     <td>3</td>
   </tr>       
 </table>

　　如圖所示：

4、百分比和數字同時使用，百分比優先級高，廢話不說，上代碼

<table style="width:600px; background-color:blue;">
   <tr>
     <td style="width: 400px">1</td>
     <td style="width: 400px">2</td>
     <td style="width: 50%">3</td>
   </tr>       
 </table>

　　

5、td定義的寬帶是默認寬度，實際寬度由內容決定。代碼示例：

<table style="width:600px; background-color:blue;">
   <tr>
     <td style="width: 200px"><div style="width: 400px;">1</div></td>
     <td>2</td>
     <td>3</td>
   </tr>       
 </table>

　　

如圖所示：

如果td不想被里面的內容div撐大，那么給table設置樣式table-layout: fixed;，就會嚴格限制表格定義的支持