移动带网格的表格 CSS

Question

我正在尝试移动第 2 列第 1 行的 table 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

--------这可以通过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 2

它们需要是单独的表还是做类似这样的工作？ 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>

Answer 3

我相信你没有做错，但此时只有IE会理解它：with vendor-prefix

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

移动带网格的表格 CSS

Move tables with grid CSS

css

css-tables