Question

我要求在表格中平均分配行。

我们假设数据库中有19条记录。所以我们必须按照以下方式安排数据

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

用户将选择他想要显示数据的列数。假设他选择要显示的列，因此输出应该是第一列：7行，第二列：6行和第3列：6行。所以基本上是它的动态显示。

我已经完成了所有逻辑但不知何故我在第二和第三行获得了空间。这是我的html输出

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

文本ASC8和ASC14应对齐文本ASC1。你能救我吗？

Answer 1

您可以添加垂直对齐并将其设置为top：

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

现场直播：

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

如何删除html表中的空格

1 个答案: