Question

这是我的第一个问题，如果我不了解网站的精神，请告诉我们;）

我编写了一个用于显示和隐藏嵌套表的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>

任何想法？是否有更好的选择来实现相同的功能？

大卫

Answer 1

好吧，我认为问题在于您尝试使用静态值作为列宽（指定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中。精确计算列的宽度以考虑边框，边距和填充。

Answer 2

试一试。有趣的是css border-collapse属性。另请注意，已删除已弃用的html属性（宽度等）以支持css规则。

<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>

在IE中对齐嵌套表

2 个答案: