CODEWITHSUNDEEP
htmlcss
James
James

Reputation: 1945

how to remove space in html table

I have requirement to distributing rows equally in table.

We assume there are 19 records in database. So we have to arrange data in following maner

ASC1          ASC8             ASC14
ASC2          ASC9             ASC15
ASC3          ASC10            ASC16
ASC4          ASC11            ASC17
ASC5          ASC12            ASC18
ASC6          ASC13            ASC19
ASC7

user will select in how many columns he want to display data. Assume he select as columns to display so output should be first column : 7 rows , second column : 6 rows and Third column: 6 rows. So basically its dynamic display.

I have completed all Logic but somehow i am getting Space in second and Third row. Here is my html output

<table style='width:480px' border='1'>
  <tr>
    <td style='width:160px'>
     <table>
       <tr>
         <td>ASC1</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC2</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC3</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC4</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC5</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC6</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC7</td>
       </tr>
     </table>
    </td>
    <td style='width:160px'>
      <table>
       <tr>
         <td>ASC8</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC9</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC10</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC11</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC12</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC13</td>
       </tr>
     </table>
    </td>
    <td style='width:160px'>
      <table>
       <tr>
         <td>ASC14</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC15</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC16</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC17</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC</td>
       </tr>
     </table>
    </td>
  </tr>
  </table>

Text ASC8 and ASC14 should align text ASC1. Can you help me?

Upvotes: 1

Views: 56

Answers (1)

fedorqui
fedorqui

Reputation: 289495

You can add a vertical align and set it to top:

table td, table td * {
    vertical-align: top;
}

See it live:

<style>
table td, table td * {
vertical-align: top;
}
</style>
<table style='width:480px' border='1'>
  <tr>
    <td style='width:160px'>
     <table>
       <tr>
         <td>ASC1</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC2</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC3</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC4</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC5</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC6</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC7</td>
       </tr>
     </table>
    </td>
    <td style='width:160px'>
      <table>
       <tr>
         <td>ASC8</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC9</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC10</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC11</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC12</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC13</td>
       </tr>
     </table>
    </td>
    <td style='width:160px'>
      <table>
       <tr>
         <td>ASC14</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC15</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC16</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC17</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC</td>
       </tr>
     </table>
     <table>
       <tr>
         <td>ASC</td>
       </tr>
     </table>
    </td>
  </tr>
  </table>

Upvotes: 2

Related Questions