html - 表格扩展和不同的浏览器

Question

我有一张 table 的问题。下面的 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中也是这样):

更新2:

对于那些想要在每个表行中具有相同数量的表数据的表的人，我更新了代码和 fiddle 。相同的行为。

Answer 1

<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>