使用网格移动表格

Question

我正在尝试移动第2列第1行的表格2. 为此，我使用了CSS网格，但结果并非如此。 我在做什么错？

https://jsfiddle.net/rafaelcb21/tcy4dfoz/

CSS

.area { 
     display: grid; 
     grid-template-columns: auto auto auto auto; 
     grid-template-rows: auto auto auto;} 

    .column_1 { 
     grid-row: 1; 
     grid-column-start: 1; 
     grid-column-end: 1;} 

    .column_2 { 
     grid-column: 2; 
     grid-row: 1;} 

HTML

<div class="area"> 
     <div class="column_1"> 
      <table> 
       <tr><td class='td'>campo1</td></tr> 
       <tr><td class='td'>campo2</td></tr> 
       <tr><td class='td'>campo3</td></tr> 
       <tr><td class='td'>campo4</td></tr> 
       <tr><td class='td'>campo5</td></tr> 
      </table> 
     </div> 
     <div class="column_2"> 
      <table> 
       <tr><td class='td'>campo1</td></tr> 
       <tr><td class='td'>campo2</td></tr> 
       <tr><td class='td'>campo3</td></tr> 
      </table> 
     </div> 
    </div> 

Answer 1

我相信你没有做错什么，但只有IE浏览器在这个时候就会明白：与供应商的前缀

.area { 
 
    display: -ms-grid; 
 
    -ms-grid-template-columns: auto auto auto auto; 
 
    -ms-grid-template-rows: auto auto auto; 
 
} 
 
.column_1 { 
 
    -ms-grid-row: 1; 
 
    -ms-grid-column-start: 1; 
 
    -ms-grid-column-end: 1; 
 
} 
 
.column_2 { 
 
    -ms-grid-column: 2; 
 
    -ms-grid-row: 1; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    width: auto; 
 
} 
 
td { 
 
    border: 1px solid #000 
 
}

<div class="area"> 
 
    <div class="column_1"> 
 
    <table> 
 
     <tr> 
 
     <td class='td'>campo1</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo2</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo3</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo4</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo5</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <div class="column_2"> 
 
    <table> 
 
     <tr> 
 
     <td class='td'>campo1</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo2</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo3</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

对于这样一个简单的布局， flex会做（浮动太）

.area { 
 
    display: flex; 
 
} 
 
table { 
 
    border-collapse: collapse; 
 
    width: auto; 
 
} 
 
td { 
 
    border: 1px solid #000 
 
} 
 
.column_2 { 
 
    background: gray; 
 
} 
 
/* you want to swap order ? */ 
 

 
.area:hover .column_2 { 
 
    order: -1 
 
}

<div class="area"> 
 
    <div class="column_1"> 
 
    <table> 
 
     <tr> 
 
     <td class='td'>campo1</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo2</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo3</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo4</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo5</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
    <div class="column_2"> 
 
    <table> 
 
     <tr> 
 
     <td class='td'>campo1</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo2</td> 
 
     </tr> 
 
     <tr> 
 
     <td class='td'>campo3</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

-------这可以通过jQuery的完成，请试试这个----- ------

<script type="text/javascript"> 
$(document).ready(function() { 

    //*** if u want to remove on pageload event then***/ 
    $('object Name Here').remove(); 
    //enter code here 
    //***or if u want to Remove attribute on button click event***/ 

    $("#remove").click(function() { 
    $("#page_navigation1").removeAttr("id"); 
    }); 
}); 
</script> 

Answer 3

他们是否需要单独的表格或做类似这样的工作？ https://jsfiddle.net/tcy4dfoz/2/

<div class="area"> 
     <div class="column_1"> 
      <table> 
       <tr> 
        <td class='td'>campo1</td> 
        <td class='td'>campo1</td> 
       </tr> 
       <tr> 
        <td class='td'>campo2</td> 
        <td class='td'>campo2</td> 
       </tr> 
       <tr> 
        <td class='td'>campo3</td> 
        <td class='td'>campo3</td> 
       </tr> 
       <tr><td class='td'>campo4</td></tr> 
       <tr><td class='td'>campo5</td></tr> 
      </table> 
     </div> 
    </div>