выровнять вложенные таблицы в IE - PullRequest
Новая
       2

выровнять вложенные таблицы в IE

0 голосов
/ 21 июля 2010

Это мой первый вопрос, поэтому дайте мне знать, если я не понял принцип сайта;)

Я написал 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>

есть идеи?Есть ли лучший вариант для достижения той же функциональности?

David

Ответы [ 2 ]

1 голос
/ 21 июля 2010

Хорошо, я думаю, что проблема в том, что вы пытаетесь использовать статическое значение для ширины столбца (вы указываете 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. Ширина столбцов точно рассчитана с учетом границ, полей и отступов.

0 голосов
/ 21 июля 2010

Попробуйте это.Интересным является свойство 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...