HTML/CSS調整表格寬度列寬不是oposite方式

Question

如何使列寬停止調整表格的寬度，因爲下面的代碼將延伸過去50像素列渲染時：

<style> 
    table { 
     width:2000px; 
    } 

    td { 
     width:50px; 
    } 
</style> 

<table border="1"> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr>  
</table> 

然後第二個問題是相反如果我沒有爲表設置寬度並將每列設置爲200px，我如何使它構建大於屏幕的大表。當我呈現以下調整頁面寬度（100％）和每列碼錶寬度有表內等寬不爲200px

<style> 
    td { 
     width:200px; 
    } 
</style> 

<table border="1"> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr>  
</table> 

Answer 1

1. display: inline-block;會解決它

   td { 
       width:50px; 
       display: inline-block; 
       /* if you want to write text in the cells longer than 50px, use also the followings */ 
       overflow: hidden; 
       white-space: nowrap; 
   } 
   

2. 會解決它

   table { 
       table-layout: fixed; 
       width: 1px; /* required for table-layout */ 
   } 
   
   td {  
       width:200px; 
   } 
   

Answer 2

問題1：刪除表格的寬度，你在Q2做會解決這個問題。

問題2：您需要檢查您的容器，因爲您的表格和列的大小不是屏幕的大小。

例：

body { 
width:1000px; 
} 

OR

container{width:1200px;} 

任一或類似的東西將要包含表，不允許它的寬度繼續。