формы в таблицах высота ячейки слишком велика

0

Следующий html приводит к строке таблицы, содержащей слишком высокие формы. Почему это происходит (я только просматривал его в Firefox), и что мне нужно, чтобы сжать его до самой высоты "ящиков" формы.

<html>
<head><title>Table Test</title></head>
<body>
<center>
<p>The bottom row of the table is too tall for the contents ...</p>
<table border="1">
<tr><th align="center">Field Name</center></td><th align="center">Field Value</center></td><tr>
<tr><td align="right">KEYCODE</td><td>NANTC06500402.00417</td></tr>
<tr><td align="right">PADVER</td><td>nantC0402.0 </td></tr>
<tr><td align="right">PARISH_CODE</td><td>NANT</td></tr>
<tr><td align="right">TAGGED</td><td>0</td></tr>
<tr><td align="right">DATED</td><td>8410420 </td></tr>
<tr><td align="right">FORENAME</td><td>WILLIAM </td></tr>
<tr><td align="right">SEX</td><td>M </td></tr>
<tr><td align="right">FATHER_FORENAME</td><td>JOHN </td></tr>
<tr><td align="right">MOTHER_FORENAME</td><td>ANNE </td></tr>
<tr><td align="right">SURNAME</td><td>PALIN </td></tr>
<tr><td align="right">OCCUPATION</td><td>OSTLER </td></tr>
<tr><td align="right">RESIDENCE</td><td>NANT </td></tr>
<tr><td align="right">ADDITIONAL_INFORMATION</td><td>HOSPITAL STREET</td></tr>
<tr><td align="left">
      <form method="post" action="...">
      <input type="submit" value="PREV">
      <input type="text" name="keycode" value="NANTC06500402.00416" size="30" readonly>
      </form>
    </td>
    <td align="right">
      <form method="post" action="...">
      <input type="text" name="keycode" value="NANTC06600401.10001" size="30" readonly>
      <input type="submit" value="NEXT">
      </form>
    </td></tr>
</table>
</center>
</body></html>

Я пробовал использовать div для хранения каждой формы (не показано в коде выше), но это не сработало. Я также попытался срезать формы вертикально внутри ячейки - это тоже не сработало.

Является ли проблема моим html или способом, которым браузеры отображают содержимое ячеек...?

Теги:
forms
html-table

2 ответа

0
Лучший ответ

Следующий код избегает проблемы с дополнительным пространством, и я думаю, это проблема с браузером, которую я не могу решить и не могу объяснить. Решение - это изменение дизайна, которое делает кликабельную сущность самой ценностью, а не словами "следующий" и "предыдущий". Таким образом, сервер видит "next"/"prev" и правильное значение, которое затем легко обрабатывается. С этим изменением дополнительное пространство исчезает в FF11, FF27, IE и Safari.

<!DOCTYPE HTML>
<html>
<head><title>Table Test 2</title></head>
<body>
<center>
<p>The bottom row of the table is the correct size ...</p>
<form method="post" action="....">
<table border="1">
<tr><th align="center">Field Name</th><th align="center">Field Value</th></tr>
<tr><td align="right">KEYCODE</td><td>NANTC06500402.00417</td></tr>
<tr><td align="right">PADVER</td><td>nantC0402.0 </td></tr>
<tr><td align="right">PARISH_CODE</td><td>NANT</td></tr>
<tr><td align="right">TAGGED</td><td>0</td></tr>
<tr><td align="right">DATED</td><td>8410420 </td></tr>
<tr><td align="right">FORENAME</td><td>WILLIAM </td></tr>
<tr><td align="right">SEX</td><td>M </td></tr>
<tr><td align="right">FATHER_FORENAME</td><td>JOHN </td></tr>
<tr><td align="right">MOTHER_FORENAME</td><td>ANNE </td></tr>
<tr><td align="right">SURNAME</td><td>PALIN </td></tr>
<tr><td align="right">OCCUPATION</td><td>OSTLER </td></tr>
<tr><td align="right">RESIDENCE</td><td>NANT </td></tr>
<tr><td align="right">ADDITIONAL_INFORMATION</td><td>HOSPITAL STREET</td></tr>
<tr><td align="left">
       PREV
       <input name="prev" type="submit" value="NANTC06500402.00416">
    </td>
    <td align="right">
       <input name="next" type="submit" value="NANTC06600401.10001">
       NEXT
    </td></tr>
</table>
</form>
</center>
</body></html>

Прошу прощения, что я не эксперт и не могу дать объяснение или истинное решение. Однако, если вы хотите избежать дополнительных проблем с пространством, таких как это, мое чтение вокруг подсказывает, что лучше всего переделать html, чтобы иметь одну форму для таблицы и соответствующим образом корректировать внешний вид содержимого и обработку, а также проиллюстрировано выше.

Надеюсь, это может помочь кому-то...

Поделиться
0

Я проверил код, и это рендеринг отлично с одинаковой высотой всех строк.

Хотя я нашел два неулокальных тега, которые вы должны удалить.

  1. </center> после имени поля в первой строке

  2. </center> после значения поля в первой строке

Кроме того, вы можете использовать type='hidden' для ключевых значений рядом с предыдущими/предыдущими кнопками, если это не обязательно для их отображения.

У вас есть внешняя таблица стилей, которая устанавливает высоту формы?

Поделиться
  • 0
    Спасибо, что посмотрели на это.
  • 0
    Спасибо за просмотр этого Boshi. Вполне возможно, что есть «глобальные» таблицы стилей, о которых я не знаю, но разве они не повлияют на ваш вид таблицы так же сильно, как на мой (у которого есть дополнительное пространство)? Как мне в этом коде отключить их эффект для этой таблицы?
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню