Расширение таблиц и разные браузеры

Question

У меня проблема с таблицей. Следующий JSFiddle покажет, что произойдет. Вам нужно открыть его с помощью Chrome и с IE до посмотреть различия.

JSFiddle open with IE and with Chrome

код в JSFiddle является следующее для тела моего HTML

<table border="1"> 
     <tr> 
     <th>data</th> 
     <th>test</th> 
     <th class="hidden">nothing</th> 
     </tr> 
     <tr> 
     <td class="empty hidden"></td> 
     <td class="empty hidden"></td> 
     <td class="" style="width:20px;" rowspan="5">extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg</td> 
     </tr> 
     <tr> 
     <td>dat</td> 
     <td>test</td> 
     <td class="empty hidden"></td> 
     </tr> 
     <tr> 
     <td>dat2</td> 
     <td>test</td> 
     <td class="empty hidden"></td> 
     </tr> 
     <tr> 
     <td>dat3</td> 
     <td>test</td> 
     <td class="empty hidden"></td> 
     </tr> 
    </table> 

Если код КСС следующее:

.hidden{ 
visibility: hidden; 

} 

.empty{ 
    line-height:0; 
} 

The "очень длинный" таблицы данные будут представлять данные, показанные пользователю, где другие таблицы являются просто табличными данными;)

Что я хочу сказать:

Я хочу, чтобы таблица была представлена ​​в Internet Explorer, как будто она представляет себя в хроме прямо сейчас. Высоты высоты таблиц изменяются в IE, но в Chrome они фиксированы, и сама таблица расширяется из-за длинных данных.

Я думал, что команда rowspan поможет здесь, но я думаю, что мне не хватает некоторых команд css.

Update:

Чтобы посмотреть, какие таблицы выглядеть, я сделал скриншоты.

Chrome и как я хочу, чтобы выглядеть в любом браузере:

IE9 (но это также выглядит в IE11):

Update2:

для тех, кто хочет иметь таблицу, которая имеет одинаковое количество табличных данных в каждой строке таблицы, I upd приложил код и скрипку. Такое же поведение.

Answer 1

попробовать это:

<style> 
.hidden{ 
    display:none; 
} 
#top{vertical-align:top;} 
</style> 

    <table border="1"> 
    <tr> 
     <td id="top"> 
      <table border="1"> 
       <tr> 
        <th>data</th> 
        <th>test</th> 
       </tr> 
       <tr> 
        <td>dat</td> 
        <td>test</td> 
       </tr> 
       <tr> 
        <td>dat2</td> 
        <td>test</td> 
       </tr> 
       <tr> 
        <td>dat3</td> 
        <td>test</td> 
       </tr> 
      </table> 
     </td> 
     <td class="" style="width:20px;">extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg</td> 
    </tr> 
</table> 

Answer 2

Вам нужно определить одинаковое число столбцов на всех линиях, в том числе по заголовку.

Вы также можете использовать colspan.

Редактирование: мое предложение без подслушивания HTML код:

<div id="symetric-content-detail"> 
    <div id="table-content" style="float: left; height: 100%"> 
    <table border="1"> 
     <tr> 
     <th>data</th> 
     <th>test</th> 
     </tr> 
     <tr> 
     <td>dat</td> 
     <td>test</td> 
     </tr> 
     <tr> 
     <td>dat2</td> 
     <td>test</td> 
     </tr> 
     <tr> 
     <td>dat3</td> 
     <td>test</td> 
     </tr> 
    </table> 
    </div> 
    <div id="table-detail" style="width: 20px; float: left; height: 100%;"> 
    extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg 
    </div> 
</div> 

Answer 3

<table width="100%" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <th>dsfdasf</th> 
    <th colspan="2">dfasd</th> 
    </tr> 
    <tr> 
    <td>dsf</td> 
    <td>fdsf</td> 
    <td rowspan="3">extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg extreeee eeeeeeeeeeeeeeeeeeoooooooooo oooooooomlyyyyyyyyyyyyy looooooo oooooo oooooooonggg gggggggggggggg</td> 
    </tr> 
    <tr> 
    <td>dfasdf</td> 
    <td>fasdf</td> 
    </tr> 
    <tr> 
    <td>&hgdgfh;</td> 
    <td>&nhdgfhbsp;</td> 
    </tr> 
</table>