Div表显示ColSpan的受干扰细胞

时间:2017-05-09 13:58:28

标签: html css

我正在尝试将以下HTML表格转换为DIV表格。

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-031e" rowspan="5"></th>
    <th class="tg-yw4l"></th>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
  </tr>
</table>

我试图在DIV中隐藏它,

但是当我把图像放在第一列时,它会扰乱所有行的大小。

请查看我的JSFiddle

1 个答案:

答案 0 :(得分:2)

您可以在.cell课程中添加此vertical-align: top;来解决该问题 检查此JSFiddle,我已编辑了您的代码