.tg {borde...">

Div table showing broken cells for ColSpan

I am trying to convert the following HTML table to a DIV table.

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

      

I tried to hide it in a DIV,

But when I put the image in the first column its getting in the way of the size of all rows.

Please check my JSFiddle

+3


source to share


1 answer


You can fix this problem, just in your class .cell

add this vertical-align: top;


Check JSFiddle , I edited your code



+2


source







All Articles