Question

我试图在第2列中移动第2行的第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才能理解它：使用vendor-prefix

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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/

git checkout HEAD@{3}

使用网格CSS移动表格

3 个答案: