用百分比值聲明的表格內的內容打破錶格

我有一個HTML頁面，其中有一個<table>集合100％X 100％http://oxide.co.il/test/table1.htm。我正在使用它，因爲我需要頁面全屏並適合所有類型的屏幕，頁面也不應滾動。用百分比值聲明的表格內的內容打破錶格

我希望表格保持原樣（左側50％，右側50％和底部10％），但是當我向表格中添加內容時，表格會重新調整其大小，對於我。

例如，當我加入一個大的圖像是這個樣子：http://oxide.co.il/test/table2.htm（右側較小，底部消失）

我希望圖像將融入<td>的原始大小。當我加入style="width:100%;"的圖像，但仍打破了表：http://oxide.co.il/test/table3.htm（底部區域沒有顯示）

當我有一個很大的<div>的<td>裏面，這也將打破錶： http://oxide.co.il/test/table4.htm（我知道<div>在px，我無法將其更改爲百分比）

如何在不重新調整大小的情況下使內容適合表格？

謝謝！

來源

2012-10-20 user1748429

你不應該使用表格排版..你有一個是非常簡單的，可與DIV-S可以輕鬆完成 –

表格不適用於佈局。正如你在你的問題的評論中所述，如果你只是使用div的話，它變得更加簡單。下面的代碼你想要做什麼，沒有表：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" > 
     <style> 
      html, body{ 
       margin: 0; 
      } 

      .container { 
       bottom: 0; 
       left: 0; 
       position: absolute; 
       right: 0; 
       top: 0; 
      } 

      .span50 { 
       width: 50%; 
      } 

      .span100 { 
       width: 100%; 
      } 

      .sheer90 { 
       height: 90%; 
      } 

      .sheer10 { 
       height: 10%; 
      } 

      .span50, .span100, 
      .sheer90, .sheer10 { 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="span100 sheer90"> 
       <div class="span50"> 
        <img src="http://placehold.it/1200x1200" width="1200px" height="1200px" alt="" /> 
       </div> 
       <div class="span50"></div> 
      </div> 
      <div class="span100 sheer10"> 
       Test 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-10-26 18:26:59 Seer

用百分比值聲明的表格內的內容打破錶格

回答

相關問題