Проблема с таблицей HTML - PullRequest
Новая
       20

Проблема с таблицей HTML

2 голосов
/ 12 декабря 2008

У меня есть проблема с таблицей HTML, которую я хотел бы лучше понять.

Давайте предположим, что у меня есть 3 строки HTML 

<table>
    <tr>
        <td style="text-align:right;">A1</td>
        <td>A2</td>
    </tr>
    <tr>
        <td style="text-align:right;">B1</td>
        <td>B2</td>
    </tr>
    <tr>
        <td colspan="2">A very loooooooong string here</td>
    </tr>
</table>

С очень длинным текстом содержимое в первых двух строках выглядит так, будто они почти центрированы. Однако, если я переместу всю «Очень длинную строку» <td> в отдельный <table> внутри строки, я вижу, что другой контент не центрируется. Почему дисплей отличается, когда содержимое <td> находится внутри другой таблицы?

Ответы [ 4 ]

1 голос
/ 03 марта 2009

Если ваш вопрос заканчивается 2 таблицами, с оригиналом, подобным этому: 

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
</table>

И более длинный текст: 

<table>
 <tr>
  <td colspan="2">A very loooooooong string here</td>
 </tr>
</table>

Тогда причина, по которой первые две строки первой таблицы больше не выглядят центрированными, состоит в том, что они не - ТОЛЬКО , если вы сравниваете относительно второй таблицы.

Если вы выполните отладку с border="1" в ваших атрибутах TABLE, вы увидите, что таблица, в которой они содержатся, сворачивается в максимально широкую ячейку данных таблицы. Из-за этого они не выглядят как бы центрированными, хотя они все еще таковы.

Добавьте произвольную ширину к первой таблице, и вы увидите, что они по-прежнему центрированы.

0 голосов
/ 12 декабря 2008

При объяснении проблемы с HTML лучше всего указать, какие браузеры использовались для тестирования ...
Во всяком случае, я провел быстрый тест с FF3 и IE6 и не вижу описанного вами поведения: у вложенной таблицы длинная строка имеет немного больше отступов, но остальное содержимое все еще визуально центрировано.
Вы должны показать свой другой код. Мой это: 

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <td colspan="2"><table><tr><td>A very loooooooong string here</td></tr></table></td>
 </tr>
</table>
0 голосов
/ 12 декабря 2008

Я думаю, я знаю, что вы имеете в виду, это вторая часть вашего вопроса, основанная на: 

<table>
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <table><td colspan="2">A very loooooooong string here</td></table>
 </tr>
</table>

тогда, я думаю, причина в том, что содержимое таблицы выровнено по левому краю, в том, что внутренние теги таблицы скрывают colspan от внешней таблицы.

Ответ - прекратить использовать html для стилизации вашей таблицы и использовать вместо этого CSS!

0 голосов
/ 12 декабря 2008

Можете ли вы привести свой второй пример? Когда я создал следующее, оно все равно выглядело так же. Существует вероятность того, что вы неправильно внедрили таблицу в ячейку таблицы с colspan-значением 2. 

<table border="1">
 <tr>
  <td style="text-align:right;">A1</td>
  <td>A2</td>
 </tr>
 <tr>
  <td style="text-align:right;">B1</td>
  <td>B2</td>
 </tr>
 <tr>
  <td colspan="2">
    <table border="1"><tr>
        <td>A very loooooooong string here</td>
    </tr></table>
  </td>
 </tr>
</table>
...