当前位置：首页 → 问答吧 → WebKit表格宽度问题

WebKit表格宽度问题

时间：2011-07-10

来源：互联网

操作系统 Win 2003 R2 SP2
如下代码，在 Safari 5.0.5、Chrome 9下，第5个表格的线会与DIV线的不重叠(原本应该是重叠，现在却变成相邻)
如果把TABLE的WIDTH设置为auto，则不会出现上述现象。
设置为auto后，获取到的TABLE clientWidth为1477px，但即使在1477px左右浮动，不管怎么设置，就是无法达到auto的效果...但...我一定要设置TABLE宽度的啊...
而且当单元格间的间隔越大时(比如把第一个单元格设置为500px宽度，当然，TABLE和DIV的宽度也要相应加大)，本应该重叠的线就越少，这到底是怎么回事呢？？其他浏览器都是正常的哦...
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>new page</title>
    <style type="text/css">
      <!--
      html,* {margin:0px; padding:0px;}
      table { border-collapse:collapse; table-layout:fixed; }
      tr { height:40px; }
      td { height:40px; }
      .line { float:left; height:300px; border-right:1px solid #000; z-index:-1; }
      -->
    </style>
  </head>
  <body style="width:2000px;">
    <div style="position:absolute; left:0px; top:0px; width:1478px; height:300px; border:0 none;">
      <div class="line" style="width:150px; border-left:1px solid #000;"></div>
      <div class="line" style="width:200px;"></div>
      <div class="line" style="width:180px;"></div>
      <div class="line" style="width:250px;"></div>
      <div class="line" style="width:180px;"></div>
      <div class="line" style="width:190px;"></div>
      <div class="line" style="width:320px;"></div>
    </div>
    <table border="1" borderColor="#000" style="width:1478px;">
      <tbody>
        <tr>
          <td style="width:150px;">abc</td>
          <td style="width:200px;">abc</td>
          <td style="width:180px;">abc</td>
          <td style="width:250px;">abc</td>
          <td style="width:180px;">abc</td>
          <td style="width:190px;">abc</td>
          <td style="width:320px;">abc</td>
        </tr>
        <tr>
          <td style="width:150px;">abc</td>
          <td style="width:200px;">abc</td>
          <td style="width:180px;">abc</td>
          <td style="width:250px;">abc</td>
          <td style="width:180px;">abc</td>
          <td style="width:190px;">abc</td>
          <td style="width:320px;">abc</td>
        </tr>
        <tr>
          <td style="width:150px;">abc</td>
          <td style="width:200px;">abc</td>
          <td style="width:180px;">abc</td>
          <td style="width:250px;">abc</td>
          <td style="width:180px;">abc</td>
          <td style="width:190px;">abc</td>
          <td style="width:320px;">abc</td>
        </tr>
        <tr>
          <td style="width:150px;">abc</td>
          <td style="width:200px;">abc</td>
          <td style="width:180px;">abc</td>
          <td style="width:250px;">abc</td>
          <td style="width:180px;">abc</td>
          <td style="width:190px;">abc</td>
          <td style="width:320px;">abc</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

作者: ma2jiajia 发布时间: 2011-07-10

.........通过CHROME的调试器查看
在width:auto情况下，各单元格宽度依次为
151、201，181，251，181，191，321 加起来是1477px，这是TR、TBODY的宽度，TABLE为1478px

但是...当width:1478px情况下，各单元格宽度却变为
151、201、181、252、181、190、321 加起来一样是1477px(TR、TBODY)，TABLE依然为1478px...
但想不通...为什么它那么自做多情的把表格宽度变成这样？？

作者: ma2jiajia 发布时间: 2011-07-10

WebKit表格宽度问题

热门阅读

热门下载