100％寬度表格單元

我有這個表格佈局。我想將整個內容對齊。所以我用width: 100%;使用一個單元。通常一切看起來不錯，很好。
但有些東西，我不明白。如果單元格中有colspan的內容比此列中的正常單元格更大（可以通過單擊Click to test button來測試此內容），它將制動整個佈局。
這發生在Chrome，Safari 4和5，IE8上，但Opera，FF和IE7都可以。100％寬度表格單元

任何想法？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>TEST</title> 
    <style type="text/css"> 
     table { width: 100%; } 
     table td { border: 1px solid black; white-space: nowrap; } 
     .delimiter { width: 100%; } 
    </style> 
    </head> 
    <body> 
     <table> 
      <tr> 
       <td><label>Row 1</label></td> 
       <td>&nbsp;</td> 
       <td><input type="text" value="Field 1" id="field1" size="25"></td> 
       <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td> 
       <td class="delimiter">&nbsp;</td> 
      </tr> 
      <tr> 
       <td><label>Row 2</label></td> 
       <td>&nbsp;</td> 
       <td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td> 
      </tr> 
     </table> 
    </body> 
</html>

來源

2010-06-15 Elvis

-2

使用W3C標準可以更節省交叉瀏覽器編碼。 Beste解決方案的JavaScript代碼crossbrowser safty是用戶jQuery。這種工具/功能更加方便。

來源

2010-06-15 08:49:42

那麼，我不能使用jQuery，因爲我將不得不重寫整個應用程序:) P.S.你是什麼意思'使用W3C標準'？ – Elvis 2010-06-15 09:13:27

jQuery，儘管一個非常流行且廣泛實現的庫不是前端設計的全部和末端。完全可以選擇不使用庫。 – ryandlf 2013-02-02 17:16:10

當你說它在某些瀏覽器而不是其他的時候，我並不感到驚訝。歡迎來到開發Web應用程序的真實世界。我沒有深入瞭解瀏覽器爲什麼以不同的方式刷新它們的佈局，因爲我知道它可能是時間的黑洞。相反，我提出以下解決方案：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>TEST</title> 
<style type="text/css"> 
    table { width: 100%; } 
    table td { border: 1px solid black; white-space: nowrap; } 
    .delimiter { width: 100%; } 
</style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td><label>Row 1</label></td> 
      <td>&nbsp;</td> 
      <td class="delimiter"> 
       <table><tr> 
        <td><input type="text" value="Field 1" id="field1" size="25" /></td> 
        <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td> 
        <td class="delimiter">&nbsp;</td> 
       </tr></table> 
      </td> 
     </tr> 
     <tr> 
      <td><label>Row 2</label></td> 
      <td>&nbsp;</td> 
      <td> 
       <table><tr> 
        <td><input type="text" id="field2" value="Field 2" size="25" /></td> 
        <td class="delimiter">&nbsp;</td> 
       </tr></table> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

我知道這不是最漂亮的解決方案，但作爲原始html它確實有效。在Chrome和IE10中測試。

來源

2013-04-22 13:43:17 Sav

100％寬度表格單元

回答

相關問題