Question

我的桌子有问题。以下JSFiddle将显示，会发生什么。你需要用Chrome和IE打开它看到差异。

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以及我希望它在每个浏览器中的外观：

Chrome Picture

IE9（但在IE11中看起来也是如此）：

IE Picture

UPDATE2：

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

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>

表扩展和不同的浏览器

3 个答案: