HTML-таблица с использованием colSpans не отображается должным образом - PullRequest
Новая
       16

HTML-таблица с использованием colSpans не отображается должным образом

4 голосов
/ 12 ноября 2009

У меня есть пример простой таблицы HTML, которая содержит несколько блоков div. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
  <table border=1 width="1000px" >
    <tr><td></td><td></td><td></td><td></td></tr>
    <tr valign="top"><td colspan="1"  ><div style="width:180px;border: solid 1px black;">1</div></td><td colspan="3"  ><div style="width:770px;border: solid 1px black;">2</div></td></tr>
    <tr valign="top"><td colspan="4"  ><div style="width:960px;border: solid 1px black;">3</div></td></tr>
    <tr valign="top"><td colspan="2"  ><div style="width:475px;border: solid 1px black;">4</div></td><td colspan="2"  ><div style="width:475px;border: solid 1px black;">5</div></td></tr>
  </table>
</body>
</html>

Проблема в том, что внешний вид строки 2 неправильный. Colspans ведут себя не так, как ожидалось. Если я уберу четвертую строку, то вторая ведет себя правильно.

Я знаю, что divs и CSS - это путь, но для этого приложения в настоящее время это невозможно.

Ответы [ 4 ]

5 голосов
/ 12 ноября 2009

Ваша проблема автоматическое расположение таблиц . Браузеру сложно просмотреть все ячейки и определить, какую ширину они получат от своего контента; это двойная сложность, когда есть кольспаны (особенно в этом примере, где нет никакого способа определить, насколько широкими должны быть столбцы 3 и 4); и это тройной труд, когда вы бедный старый трудолюбивый Internet Explorer, благослови.

Не заставляйте браузер бороться, хрипеть и рендерить медленно: используйте fixed table-layout и точно объявляйте ширину каждого столбца. Обычно это делается с <col> элементами: 

#thing { width: 950px; table-layout: fixed; border-spacing: 0; }
#thing .wide { width: 295px; }
#thing .narrow { width: 180px; }
#thing.box { border: solid black 1px; }

<table id="thing">
    <col class="narrow" /><col class="wide" /><col class="wide" /><col class="narrow" />
    <tr>
        <td colspan="1"><div class="box">1</div></td>
        <td colspan="3"><div class="box">2</div></td>
    </tr>
    <tr>
        <td colspan="4"><div class="box">3</div></td>
    </tr>
    <tr>
        <td colspan="2"><div class="box">4</div></td>
        <td colspan="2"><div class="box">5</div></td>
    </tr>
</table>

Однако в Webkit есть ошибка, которая игнорирует ширину <col>, когда в этом столбце нет ни одной незаполненной ячейки. Это довольно необычно для таблиц, но это имеет место в приведенном выше примере: только первый столбец содержит нераспределенную ячейку. Чтобы обойти это, вы можете либо заменить элементы <col> на пустую строку в начале, стилизованную так, чтобы иметь минимальную высоту: 

#thing .cols td { height: 1px; line-height: 1px; font-size: 1px; }

<tr class="cols">
    <td class="narrow"></td><td class="wide"></td><td class="wide"></td><td class="narrow"></td>
</tr>

Или, иногда менее навязчиво, оставьте <col> s и добавьте пустую строку внизу: 

<tr class="cols"><td></td><td></td><td></td><td></td></tr>
0 голосов
/ 12 ноября 2009

Это артефакт вашей CSS, конфликтующий с шириной таблицы (или ее отсутствием).

Этот код определяет ширину ячейки в первой строке, а затем использует css, чтобы закодированные элементы div заполняли ячейки: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
     td div {
          width:100%;
          border: solid 1px black;
     }
</style>
</head>

<body>
  <table border=1 width="1000px" >
    <tr><td width="18%">18%</td><td width="30%">30%</td><td width="26%">26%</td><td width="26%">26%</td></tr>
    <tr valign="top"><td colspan="1"  ><div>18%</div></td><td colspan="3"  ><div>82%</div></td></tr>
    <tr valign="top"><td colspan="4"  ><div>100%</div></td></tr>
    <tr valign="top"><td colspan="2"  ><div>48%</div></td><td colspan="2"  ><div>52%</div></td></tr>
  </table>
</body>
</html>

Основная проблема заключается в том, что вы определяете ширину для элементов div внутри ячеек таблицы, ожидая, что они приведут вашу таблицу в форму. В действительности, ваши первые ячейки (пустые в верхней части) не имеют определенной ширины, поэтому, когда вы пересекаете эти неопределенные ширины, вы получаете больше неопределенной ширины, а затем вводите в них делители определенного размера. Вам, вероятно, следует либо установить для div'ов ширину 100% и задать размер своих ячеек, либо просто стилизовать свои ячейки, исключив в целом divs.

Лучше всего, просто используйте css и div, без таблицы, но я понимаю, что это может быть разочарованием, особенно если вы новичок в css.

0 голосов
/ 12 ноября 2009

Что с кодом не работает, как ожидалось? Я попробовал ваш пример кода, и он работает как надо: в таблице 4 столбца; первая строка пуста, вторая имеет два столбца, один большой и один короткий, третья строка имеет один столбец, который охватывает всю таблицу, а четвертая строка имеет 2 столбца.

Следует отметить, что элементы div внутри таблицы не обязательно соответствуют ширине столбцов, в которых они находятся. Это связано с тем, как вычисляются значения ширины столбцов таблицы: таблица имеет фиксированную ширину (1000 пикселей). Столбцы распределены в пределах этих 1000 пикселей, чтобы наилучшим образом соответствовать содержащимся данным.

  • Строка 1 ничего не говорит о ширине столбца.
  • В строке 2 указано, что значение column1 должно быть не менее 180px, а значение столбца 2 + 3 + 4 должно быть не менее 770px.
  • Строка 3 говорит, что столбцы 1 + 2 + 3 + 4 должны быть не менее 960 пикселей.
  • В строке 4 указано, что столбцы 1 + 2 должны иметь размер не менее 475 пикселей, а столбцы 3 + 4 - не менее 475 пикселей.

Поскольку ничего не сказано о столбце 2, а столбец 2 не содержит данных, он имеет минимальную ширину, а размер столбца 1 - больше, чем вы ожидаете.

Вы можете решить эту проблему, указав ширину в самих столбцах, либо используя синтаксис <col>, правило CSS, либо указав размер в первой строке таблицы (используя <td width="">.

0 голосов
/ 12 ноября 2009

Я видел много проблем с таким форматированием. Вы пробовали возиться с <col>?

Например, (я знаю, что номера, вероятно, выключены, но вы можете настроить при необходимости): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
  <table border='1' width="1000px" style='border-collapse: collapse' >
    <col width='180' /><col width='180' /><col width='180' /><col width='180' />
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
    <tr valign="top"><td colspan="1"  ><div style="width:180px;border: solid 1px black;">1</div></td><td colspan="3"  ><div style="width:770px;border: solid 1px black;">2</div></td></tr>
    <tr valign="top"><td colspan="4"  ><div style="width:960px;border: solid 1px black;">3</div></td></tr>
    <tr valign="top"><td colspan="2"  ><div style="width:475px;border: solid 1px black;">4</div></td><td colspan="2"  ><div style="width:475px;border: solid 1px black;">5</div></td></tr>
  </table>
</body>
</html>

См. http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4.2 Для получения дополнительной информации

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...