Почему две таблицы не могут быть правильно выровнены?

Я поддерживал очень старый веб-проект и обнаружил проблемы с выравниванием. Кажется, это очень простые проблемы с HTML или CSS, но я не мог в этом разобраться.

Приложение создает две таблицы в коде позади (заполняет содержимое второй таблицы) и складывает их следующим образом:

<table border="1">
  <tr>
    <td width="70%" align="center">Description</td>
    <td width='75px'>Header1</td>
    <td width='75px'>Header2</td>
    <td width='75px'>Header3</td>
  </tr>

</table>

<table border="1">
  <tr>
    <td width='70%'>
      <input type="text" name="first_name" value="Software" style="width:100%" />
    </td>
    <td width='75px'>
      <input type="text" value="2000" style="width:100%" />
    </td>
    <td width='75px'>
      <input type="text" value="1" style="width:100%" />
    </td>
    <td width='75px'>
      <input type="text" value="2" style="width:100%" />
    </td>
  </tr>

</table>

Первая таблица служит заголовком, а вторая таблица содержит строки сведений. Таким образом, каждый заголовок должен правильно согласовываться с его содержимым. Но когда я изменяю размер окна, выравнивание нарушается.

Мне просто интересно, почему это происходит, поскольку таблицы имеют одинаковую структуру. Единственное отличие состоит в том, что во второй таблице вместо простого текста используются некоторые элементы ввода.


html
person Jerryszz    schedule 22.09.2016    source источник
comment
Не можете ли вы изменить приложение для создания одной таблицы с включенным заголовком?   -  person Sam    schedule 23.09.2016
comment
Проблема в том, что ширина ячеек первой таблицы не будет меньше, чем отдельные текстовые слова внутри них. Если вы должны использовать таблицы, просто добавьте вторую строку в первую таблицу, содержащую входные данные: jsfiddle.net/saqfnfzs   -  person BenM    schedule 23.09.2016

Ответы (2)


arrow_upward
0
arrow_downward

Так работают таблицы. Содержимое первой таблицы слишком велико, чтобы сжать ячейки таблицы так же сильно, как и во второй таблице. Быстрая проверка — изменить текст в первой таблице, см., например, эту скрипту: https://jsfiddle.net/q4zzvcra/

Кроме того, td width="75px" нужно td width="75" отказаться от пикселей

В html 5 ширина больше не поддерживается для td, вместо этого используйте css, см. этот пост: HTML 'td ' ширина и высота

person Wim Mertens    schedule 22.09.2016

arrow_upward
0
arrow_downward

Я попробовал это на https://jsfiddle.net/9p37p2en/.

Единственное отличие состоит в том, что во второй таблице вместо простого текста используются некоторые элементы ввода.

И это именно ваша проблема. Текстовые узлы никогда не будут уменьшаться за пределы минимальной ширины самого длинного слова, поэтому, если вы не избавитесь от переполнения в своей таблице, ваша ячейка таблицы не уменьшится меньше, чем это. Однако текстовое поле INPUT может уменьшиться до нескольких пикселей.

Также:

  • Абсолютная ширина в ячейках таблицы игнорируется, если в этой же таблице есть ячейки с относительной шириной. Вы можете безопасно удалить width=75px, он вообще ничего не делает.
  • Вы не должны использовать свойства width и align td. Вместо этого используйте его стиль или свойство класса вместе с правильным CSS.
person The Pellmeister    schedule 22.09.2016
comment
Спасибо за ваше объяснение. Я считаю, что цель состоит в том, чтобы сохранить фиксированную ширину (75 пикселей) header1, header2 и header3, позволяя описанию заполнить остальную часть экрана. - person Jerryszz; 03.10.2016