6

CSS Invert (Transpose) Rows and Columns of HTML Table

 2 years ago
source link: http://siongui.github.io/2017/04/16/css-only-transpose-html-table/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

CSS Invert (Transpose) Rows and Columns of HTML Table

April 16, 2017

See demo first. Click the red Transpose text several times to see the table transposed back and forth:

Transpose

(1,1) (1,2) (1,3) (1,4) (2,1) (2,2) (2,3) (2,4) (3,1) (3,2) (3,3) (3,4)

To invert (transpose) the rows and columns of an HTML table, we can use the following CSS rules [2]:

tr { display: block; float: left; }
th, td { display: block; }

To toggle (original/transposed) the HTML table, we can use the technique described in [3] and [4].

The complete source code for above demo:

HTML

<label for="element-toggle">Transpose</label>
<input id="element-toggle" type="checkbox" />

<table id="toggled-element">
 <tbody>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
    <td>(1,3)</td>
    <td>(1,4)</td>
  </tr>
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
    <td>(2,3)</td>
    <td>(2,4)</td>
  </tr>
  <tr>
    <td>(3,1)</td>
    <td>(3,2)</td>
    <td>(3,3)</td>
    <td>(3,4)</td>
  </tr>
 </tbody>
</table>

CSS

label[for=element-toggle] {
  cursor: pointer;
  color: red;
}
#element-toggle {
  display: none;
}

#element-toggle:checked ~ #toggled-element tr {
  display: block;
  float: left;
}
#element-toggle:checked ~ #toggled-element th,
#element-toggle:checked ~ #toggled-element td {
  display: block;
}

References:


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK