設置<table>大小的最佳做法是什麼？

Question

我想知道設置表格大小（寬度）的最佳做法是什麼，以便單元格中的內容不會離開表格（特別是horizentally），但它們將被強制留在單元格中。

我是否需要在元素級別設置寬度，高度，或者我應該爲元素級別設置寬度和高度？

例如這個表：

<table> 
     <tr > 
      <td> 
       Name 
      </td> 
      <td> 
       Mr.Tuber 
      </td> 
     </tr> 

     <tr > 
      <td> 
       Surname 
      </td> 
      <td> 
       Tupova 
      </td> 
     </tr> 
</table> 

Answer 1

的單元格的內容將永遠不會在表格外，只要你把文本中的單元格。

建立一個像這樣的表格的一個好方法是使用CSS來設置表格的整體大小以及列的寬度。讓表格垂直擴展以自動容納內容。

<table class="table1"> 
     <tr> 
      <td class="col1"> 
       Name 
      </td> 
      <td class="col2"> 
       Mr.Tuber 
      </td> 
     </tr> 

     <tr> 
      <td> 
       Surname 
      </td> 
      <td> 
       Tupova 
      </td> 
     </tr> 
</table> 

CSS：

table.table1 { 
    width:500px 
} 

table1 .col1 { 
    width:200px 
} 

你不需要專門設置COL2，因爲它會採取任何空間，如果遺留下來的。您也可以使用TH而不是TD作爲標題單元格，因此您可以使用與內容單元格不同的樣式。

.table1 th { ... }