html - Spacing issue. Replace tables with divs -
there huge gap above table, , cannot understand why.
here html:
.table-size-guide td { border: 1.5px solid #ced9e0; padding-left: 10px; color: #ced9e0; font-family: helvetica; font-size: 12px; } .sizing-table { color: #fd8014; }
<table class="table-size-guide" style="width: 100%;" cellspacing="2" cellpadding="5"> <tbody> <tr> <td style="padding-top: 8px; padding-right: 40px; padding-bottom: 5px; padding-left: 12px; background-color: #ededed;"> <span style="color: #ff8f07;"><strong>waist size</strong></span> </td> <td style="padding-top: 8px; padding-right: 0px; padding-bottom: 5px; padding-left: 12px; background-color: #ededed;"> <span style="color: #ff8f07;"><strong>to fit height</strong></span> </td> </tr> <tr> <td> <div class="sizing-table">26in</div> </td> <td> <div class="sizing-table">128cm</div> </td> </tr> <tr> <td> <div class="sizing-table">27in</div> </td> <td> <div class="sizing-table">134cm</div> </td> </tr> <tr> <td> <div class="sizing-table">28in</div> </td> <td> <div class="sizing-table">137cm</div> </td> </tr> <tr> <td> <div class="sizing-table">29in</div> </td> <td> <div class="sizing-table">140cm</div> </td> </tr> <tr> <td> <div class="sizing-table">30in</div> </td> <td> <div class="sizing-table">146cm</div> </td> </tr> <tr> <td> <div class="sizing-table">31in</div> </td> <td> <div class="sizing-table">152cm</div> </td> </tr> <tr> <td> <div class="sizing-table">32in</div> </td> <td> <div class="sizing-table">152cm</div> </td> </tr> <tr> <td> <div class="sizing-table">33in</div> </td> <td> <div class="sizing-table">152cm</div> </td> </tr> <tr> <td> <div class="sizing-table">34in</div> </td> <td> <div class="sizing-table">152cm</div> </td> </tr> <tr> <td> <div class="sizing-table">35in</div> </td> <td> <div class="sizing-table">158cm</div> </td> </tr> <tr> <td> <div class="sizing-table">36in</div> </td> <td> <div class="sizing-table">158cm</div> </td> </tr> <tr> <td> <div class="sizing-table">38in</div> </td> <td> <div class="sizing-table">158cm</div> </td> </tr> <tr> <td> <div class="sizing-table">40in</div> </td> <td> <div class="sizing-table">158cm</div> </td> </tr> <tr> <td> <div class="sizing-table">42in</div> </td> <td> <div class="sizing-table">158cm</div> </td> </tr> <tr> <td> <div class="sizing-table">44in</div> </td> <td> <div class="sizing-table">158cm</div> </td> </tr> <tr> <td> <div class="sizing-table">46in</div> </td> <td> <div class="sizing-table">158cm</div> </td> </tr> <tr> <td> <div class="sizing-table">48in</div> </td> <td> <div class="sizing-table">158cm</div> </td> </tr> <tr> <td> <div class="sizing-table">50in</div> </td> <td> <div class="sizing-table">158cm</div> </td> </tr> </tbody> </table>
ideally, convert table divs have been unable find solution there quite few rows , columns. advice?
Comments
Post a Comment