表扩展和不同的浏览器

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> 

的身体上的CSS代码如下如下：

.hidden{ 
visibility: hidden; 

} 

.empty{ 
    line-height:0; 
} 

的 “超长” 表格数据将表示向用户显示的数据，其中其他表数据只是表数据;）

我想要发生的事情：

我想让表格在Internet Explorer中表现出来，就像它现在在chrome中表示自己一样。表格数据高度在IE中发生变化，但在Chrome中它们是固定的，并且由于数据较长，表格本身也会扩展。

我认为rowspan命令会在这里帮助，但我想我错过了一些css命令。

更新：

要看看这些表的样子，我做了截图。

Chrome和我多么希望它看起来像在每一个浏览器：

IE9（但它也看起来像这样在IE11）：

UPDATE2：

对于那些想要在每个表行中具有相同数量的表数据的表，我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>