Question

我的页面中有3个表格，如下所示：

Table1
Table2
Table3

现在我如何将table 2和3移动到table1旁边，table3位于table2之下，如下所示：

       Table2
Table1 Table3

表格的HTML：

    <table id="table-1">
       <tbody>
         <tr class="row-1">
           <td class="column-1">something</td><td class="column-2">something</td>
         </tr>
         <tr class="row-2">
           <td class="column-1">something</td><td class="column-2">something</td>
        </tr>

    <table id="table-2">
       <tbody>
         <tr class="row-1">
           <td class="column-1">something</td><td class="column-2">something</td>
         </tr>
         <tr class="row-2">
           <td class="column-1">something</td><td class="column-2">something</td>
        </tr>

<table id="table-3">
       <tbody>
         <tr class="row-1">
           <td class="column-1">something</td><td class="column-2">something</td>
         </tr>
         <tr class="row-2">
           <td class="column-1">something</td><td class="column-2">something</td>
        </tr>

Answer 1

您可以将它们浮动到左侧和右侧：

td {
  border: 1px solid black;
}
#table-1 { 
  border: 2px solid red;
  float: left;
}
#table-2 { 
  border: 2px solid blue;
  float: right;
}
#table-3 { 
  border: 2px solid yellow;
  float: right;
  clear: left;
}

<table id="table-1">
  <tbody>
    <tr class="row-1">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
    <tr class="row-2">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
  </tbody>
</table>

<table id="table-2">
  <tbody>
    <tr class="row-1">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
    <tr class="row-2">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
  </tbody>
</table>

<table id="table-3">
  <tbody>
    <tr class="row-1">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
    <tr class="row-2">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
  </tbody>
</table>

或者另外，有两个“列”div：

td {
  border: 1px solid black;
}
#table-1 { border: 2px solid red; }
#table-2 { border: 2px solid blue; }
#table-3 { border: 2px solid yellow; }

#col1, #col2 {
  float: left;
}

<div id="col1">
  <table id="table-1">
    <tbody>
      <tr class="row-1">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
      <tr class="row-2">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
    </tbody>
  </table>
</div>

<div id="col2">
  <table id="table-2">
    <tbody>
      <tr class="row-1">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
      <tr class="row-2">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
    </tbody>
  </table>

  <table id="table-3">
    <tbody>
      <tr class="row-1">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
      <tr class="row-2">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

这可能对你有帮助....

取三个select eventtimestamp - lead(eventtimestamp) over (order by eventtimestamp) from ga_visit_events并将每个divs放入每个div中，然后使用table

的css属性

Answer 3

＆＃13;

#table-1{float:left;}

＆＃13;

<table id="table-1">
<tbody>
<tr class="row-1">
    <td class="column-1">something1</td><td class="column-2">something1</td>
</tr>
<tr class="row-2">
    <td class="column-1">something1</td><td class="column-2">something1</td>
</tr>
<tbody>
</table>
<table id="table-2">
<tbody>
<tr class="row-1">
    <td class="column-1">something2</td><td class="column-2">something2</td>
</tr>
<tr class="row-2">
    <td class="column-1">something2</td><td class="column-2">something2</td>
</tr>

<table id="table-3">
<tbody>
<tr class="row-1">
    <td class="column-1">something3</td><td class="column-2">something3</td>
</tr>
<tr class="row-2">
    <td class="column-1">something3</td><td class="column-2">something3</td>
</tr>
  <tbody>
</table>
  <tbody>
</table>

＆＃13;

Answer 4

你能试试吗？

<div style="float:left">
     <table id="table-1">
         <tr><td>Table11</td><td>Table12</td></tr>
         <tr><td>Table13</td><td>Table14</td></tr>
     </table>
</div>

<div style="float:right">
     <table id="table-2">
         <tr><td>Table21</td><td>Table22</td></tr>
         <tr><td>Table23</td><td>Table24</td></tr>
     </table>

     <table id="table-3">
         <tr><td>Table31</td><td>Table32</td></tr>
         <tr><td>Table33</td><td>Table34</td></tr>
     </table>
  </div>

将表彼此相邻移动

4 个答案: