代码之家 › 专栏 › 技术社区 › GreyCloud

对齐IE中的嵌套表

xhtml html javascript

GreyCloud · 技术社区 · 15 年前

这是我在这里的第一个问题,所以让我知道,如果我不了解网站的精神;)

我已经编写了一个html页面来显示和隐藏嵌套表。我想让这些列正确对齐。我已经接近设置列有一个特定的宽度

IE和firefox中的列都有几个像素外…-我怎样才能解决这个问题?

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<script type="text/javascript">
      <!--
          function toggle_visibility(id) {
             var e = document.getElementById(id);
             if(e.style.display == '') {
               e.style.display = 'block';
             }
             if(e.style.display == 'block')
                e.style.display = 'none';
             else
                e.style.display = 'block';
          }
      //-->
    </script>
</head>

<body>

<div id="root">
  <table border="1" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td width="200">
        <p><a href="#" onclick="toggle_visibility('itemAAA');">itemA</a></p>
      </td>
      <td width="200">Feild2</td>
      <td width="200">Feild3</td>
    </tr>
    <tr>
      <td colspan="3">
      <div id="itemAAA">
        <table border="1" cellspacing="0" width="100%">
        <tbody>
          <tr>
            <td width="200">
              <p><a href="#" onclick="toggle_visibility('itemAA');">itemAA</a></p>
            </td>
            <td width="200">Feild2</td>
            <td width="200">Feild3</td>
            </tr>
          <tr>
          <td colspan="3">
            <div id="itemAA">
              <table border="1" cellspacing="0" width="100%">
              <tbody>
                <tr>
                  <td width="200">
                    <p>itemAAA</p>
                  </td>
                  <td width="200">Feild2</td>
                  <td width="200">Feild3</td>
                </tr>
              </tbody>
              </table>
              </div>
            </td>
          </tr>
        </tbody>
        </table>
      </div>
      </td>
    </tr>
    <tr>
      <td width="200">
        <p>itemB</p>
      </td>
      <td width="200">Feild2</td>
      <td width="200">Feild3</td>
    </tr>
    </tbody>
  </table>
</div>

</body>

</html>

大卫

2 回复 | 直到 15 年前

s.susini 15 年前

好的,我认为问题在于,您尝试对列宽使用一个静态值(您指定200px),然后为表指定一个100%的宽度。

另一个问题是边界、填充和边距的定义:您不确切知道(或不考虑)浏览器如何绘制边界/填充/边距,因此无法指定精确的值。

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<script type="text/javascript">
      <!--
          function toggle_visibility(id) {
             var e = document.getElementById(id);
             if(e.style.display == '') {
               e.style.display = 'block';
             }
             if(e.style.display == 'block')
                e.style.display = 'none';
             else
                e.style.display = 'block';
          }
      //-->
    </script>
    <style>
        table{
            background-color: black;
        }
        td{
            background-color: white;
            margin: 0;
            padding: 2px;
        }
    </style>
</head>

<body>

<div id="root">
  <table cellspacing="2">
  <tbody>
    <tr>
      <td width="200">
        <p><a href="#" onclick="toggle_visibility('itemAAA');">itemA</a></p>
      </td>
      <td width="200">Feild2</td>
      <td width="200">Feild3</td>
    </tr>
    <tr>
      <td colspan="3">
      <div id="itemAAA">
        <table cellspacing="2">
        <tbody>
          <tr>
            <td width="196">
              <p><a href="#" onclick="toggle_visibility('itemAA');">itemAA</a></p>
            </td>
            <td width="200">Feild2</td>
            <td width="196">Feild3</td>
            </tr>
          <tr>
          <td colspan="3">
            <div id="itemAA">
              <table cellspacing="2">
              <tbody>
                <tr>
                  <td width="192">
                    <p>itemAAA</p>
                  </td>
                  <td width="200">Feild2</td>
                  <td width="192">Feild3</td>
                </tr>
              </tbody>
              </table>
              </div>
            </td>
          </tr>
        </tbody>
        </table>
      </div>
      </td>
    </tr>
    <tr>
      <td width="200">
        <p>itemB</p>
      </td>
      <td width="200">Feild2</td>
      <td width="200">Feild3</td>
    </tr>
    </tbody>
  </table>
</div>

</body>

</html>

如您所见,我从表中删除了宽度,并将som css放入cose中。列的宽度是精确计算的,以考虑到边框、边距和填充。

Dagg Nabbit 15 年前

试试这个。有趣的是css border-collapse

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<style>
  table.grid { padding:0; margin:0; width:100%; border-collapse:collapse; }
  table.grid td  { padding:0; margin:0; outline:1px outset silver; width:33% }
  table.grid div { padding:0; margin:0;  }
</style>
<script type="text/javascript">
  function toggle_visibility (id) {
    var e = document.getElementById(id);
    if (e.style.display == 'none')
      e.style.display = 'block';
    else
      e.style.display = 'none';
  }
</script>
</head>

<body>

<div id="root">
  <table class="grid">
  <tbody>
    <tr>
      <td>
        <p><a href="#" onclick="toggle_visibility('itemAAA');">itemA</a></p>
      </td>
      <td>Feild2</td>
      <td>Feild3</td>
    </tr>
    <tr>
      <td colspan="3">
      <div id="itemAAA">
        <table class="grid">
        <tbody>
          <tr>
            <td>
              <p><a href="#" onclick="toggle_visibility('itemAA');">itemAA</a></p>
            </td>
            <td>Feild2</td>
            <td>Feild3</td>
            </tr>
          <tr>
          <td colspan="3">
            <div id="itemAA">
              <table class="grid">
              <tbody>
                <tr>
                  <td>
                    <p>itemAAA</p>
                  </td>
                  <td>Feild2</td>
                  <td>Feild3</td>
                </tr>
              </tbody>
              </table>
              </div>
            </td>
          </tr>
        </tbody>
        </table>
      </div>
      </td>
    </tr>
    <tr>
      <td>
        <p>itemB</p>
      </td>
      <td>Feild2</td>
      <td>Feild3</td>
    </tr>
    </tbody>
  </table>
</div>

</body>

</html>