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％宽度表格单元

回答

相关问题