Vertical header row in a table

  • Resolved lneesbye

    (@lneesbye)


    2 years, 4 months ago

    I’m trying to flip the header text in some columns on its side for space efficiency purposes. I saw a post from a few years ago that said there was no good way to accomplish this. Has anyone figured out to accomplish this? Thanks in advance, Lene

Viewing 1 replies (of 1 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    2 years, 4 months ago

    Hi!

    Thanks for your post and sorry for the trouble!

    There are approaches for this, but they need some customization, depending on the table.

    One approach that seems to be working quite well is to wrap the text in the header cells in <div><span> and </span></div> HTML tags, i.e. to write all table header cells like

    <div><span>Header text</span></div>

    Then, you add this to the “Custom CSS” textarea on the “Plugin
    Options” screen of TablePress:

    .tablepress-id-123 th {
    min-width: 20px;
}
.tablepress-id-123 th > div {
  height: 110px;
  position: relative;
}
.tablepress-id-123 th > div > span {
  bottom: -10px;
  left: 50%;
  position: absolute ;
  transform: rotate( -90deg ) ;
  transform-origin: center left;
  white-space: nowrap;
}

    The table ID and numbers for widths and heights would need to be adjusted accordingly.

    Best wishes,
    Tobias

Viewing 1 replies (of 1 total)

The topic ‘Vertical header row in a table’ is closed to new replies.