Question 325644 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to make rows of content into a column with pure CSS?

I have a table like this:

<p>On large screens</p>
<table>
  <tr>
    <td>1</td>
    <td>3</td>
    <td>5</td>
  </tr>
    <tr>
    <td>2</td>
    <td>4</td>
    <td>6</td>
  </tr>
</table>

Is there a way to modify it purely with CSS to LOOK like this? (a single column where every odd item is from the first row and every even is from the second row)

<p>On small screens</p>

<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>

I tried to use display: contents; but apparently, it does not work on <tr>-s for some reason. Any ideas on how I should approach this? Also, I can only use pure (S)CSS. The number of rows and columns is dynamic.

Tags:

2

Answers


  1. 0

    Use CSS grid like below

    table {
  display: grid;
}

table > *, /* you need to target the "tbody" as well as "tr" */
table tr {
  display: contents;
}

td:nth-child(1) {order:1}
td:nth-child(2) {order:2}
td:nth-child(3) {order:3}
/* td:nth-child(n) {order:n} */
    <p>On large screens</p>
<table>
  <tr>
    <td>1</td>
    <td>3</td>
    <td>5</td>
  </tr>
    <tr>
    <td>2</td>
    <td>4</td>
    <td>6</td>
  </tr>
</table>

    Or a very hacky way that I don’t recommend:

    table {
  display: grid;
}

table > tbody {
  display: contents;
}

/* the hack is here */
table tr {
  grid-area: 1/1; /* both tr will overlap */
  display: grid;
  grid-auto-rows: 2lh; /* you need to make this equal to twice the height of one "td" */
}

/* the second one will show the content at the bottom while the first one will keep the at the top */
table tr:nth-child(2) {
  align-items: end;
}
    <p>On large screens</p>
<table>
  <tr>
    <td>1</td>
    <td>3</td>
    <td>5</td>
  </tr>
    <tr>
    <td>2</td>
    <td>4</td>
    <td>6</td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    You could have the rows overlayed each other, with the rows separated by the total height of each <td> element:

    table, td {
  display: block;
}

table {
  position: relative;
}

tr:nth-child(2) {
  position: absolute;
  top: 1.25em;
}

td {
  line-height: 1.25;
  margin-bottom: 1.25em;
  padding: 0;
}
    <p>On large screens</p>
<table>
  <tr>
    <td>1</td>
    <td>3</td>
    <td>5</td>
  </tr>
  <tr>
    <td>2</td>
    <td>4</td>
    <td>6</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search