rafaelcb21 rafaelcb21 - 2 months ago 15
CSS Question

Move tables with grid CSS

I'm trying to move the table 2 for line 1 in column 2.
For this I am using css grid, but the result is not this happening.
What am I doing wrong?

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

I believe you are doing nothing wrong, but only IE at this time will understand it: 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>

for such a simple layout, flex will do (float too)

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