Таблица фиксированного размера с охватом столбца в IE8 - PullRequest
Новая
       18

Таблица фиксированного размера с охватом столбца в IE8

1 голос
/ 05 июля 2011

Я пытаюсь сделать таблицу в html, используя фиксированные размеры и охват столбцов.

Вот код, с которым я работаю: 

<table style="width:602px;" border="1" cellspacing="0">
  <tr>
    <td style="height:148px; width:298px;" colspan="2"></td>
    <td style="height:148px; width:298px;" colspan="2"></td>
  </tr>
  <tr>
    <td style="height:148px; width:148px;"></td>
    <td style="height:148px; width:298px;" colspan="2">content</td>
    <td style="height:148px; width:148px;"></td>
  </tr>
  <tr>
    <td style="height:148px; width:148px;"></td>
    <td style="height:148px; width:298px;" colspan="2"></td>
    <td style="height:148px; width:148px;"></td>
  </tr>
  <tr>
    <td style="height:148px; width:148px;"></td>
    <td style="height:148px; width:298px;" colspan="2"></td>
    <td style="height:148px; width:148px;"></td>
  </tr>
</table>

Это работает, как я ожидаюна хром (создание 2 ячеек двойной длины в первом ряду, а затем три ряда ячеек одинарной-двойной-одинарной длины).Однако в IE8 средняя ячейка в нижних 3 ячейках имеет размер, подходящий для «контента», а не для размера, который я определил.

Я что-то не так делаю, и как мне это изменить, чтобы заставить работать так, как я хочу?Есть ли лучший способ сделать то, что я пытаюсь сделать?

1 Ответ

0 голосов
/ 05 июля 2011

Удалите ширину таблицы, и вы увидите, как ведет себя ваша таблица ...

Да, все ваши столбцы пытаются иметь ширину 298 пикселей.Это потому, что таблица пытается подогнать ширину столбца к первой строке ... Удалите бесполезное объявление и попробуйте это: 

<table border="1" cellspacing="0">
  <tr>
    <td  style="height:148px;"  colspan="2">1fdasfsdafsdfas</td>
    <td  colspan="2">1</td>
  </tr>
  <tr>
    <td style="height:148px; width:148px;">1</td>
    <td style="width:298px;" colspan="2">1</td>
    <td style="width:148px;">1</td>
  </tr>
  <tr>
    <td style="height:148px;">1</td>
    <td colspan="2">1</td>
    <td>1</td>
  </tr>
  <tr>
    <td style="height:148px;">1</td>
    <td colspan="2">1</td>
    <td>1</td>
  </tr>
</table>
...