Vertical text frozen at the top of a table

Question

Vertical text frozen at the top of a table

My goal is to design a table with frozen threads and vertically oriented labels in the header. I have made an attempt at implementing this below, but as a newcomer to CSS, I am facing several challenges.

One issue I've encountered with my solution is that it's not immediately clear that there are more rows to scroll through, as the scrollbar remains hidden until you start scrolling. Is there a way to keep the scrollbar visible at all times?
There is also a large gap above where the party names are displayed in the header. While adjusting the values in "th.vertical" can increase this gap, I'm struggling to eliminate it entirely. How can I make the header only as tall as the text it contains?
Lastly, I would like the vertical text in the header to be centered in relation to the column values, but I haven't been able to achieve this yet. Any suggestions on how I could do this?
Additionally, I want to enable sorting on any column

table thead tr {
  display: block;
}

table th,
table td {
  width: 75px; //fixed width
}

div.vertical {
  margin-left: -100px;
  position: absolute;
  width: 210px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 60px;
  line-height: 14px;
  padding-bottom: 100px;
  text-align: left;
}

table tbody {
  display: block;
  height: 500px;
  overflow: auto;
}

<table class='vrt-header'>
  <thead>
    <tr>
      <th></th>
      <th class="vertical">
        <div class="vertical">Republican</div>
      </th>
      <th class="vertical">
        <div class="vertical">Democrat</div>
      </th>
      <th class="vertical">
        <div class="vertical">Libertarian</div>
      </th>
      <th class="vertical">
        <div class="vertical">Green</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <!-- Data goes here -->
  </tbody>
</table>

jquery css html html-table

Answer 1

Answer №1

I've made some adjustments to your code...

Unfortunately, I couldn't find a better way to always display the scrollbar other than using overflow-y: scroll;.
I tried various styling changes for your headers but struggled with dynamically adjusting their height after applying transform. Ended up using fixed values.
The updated styling should address this issue.
You might want to look into the Stupid Table Plugin for jQuery, it can simplify table sorting.

In addition, I included:

Added some hover effects using :hover on the th elements to highlight actions.
Implemented row color alternation using the :nth-of-type() selector.

Here's the revised snippet:

// Find documentation here: https://joequery.github.io/Stupid-Table-Plugin/
$("#simpleTable").stupidtable();

table thead,
table tbody {
  display: block;
}

table tbody {
  height: 500px;
  overflow-y: scroll; /* Ensures scrollbar visibility */
}

thead th {
  position: relative;
  cursor: pointer;
  height: 90px;
  background: #ccc;
  border-bottom: 2px solid black;
}

thead th:hover {
  background: #ccf; 
}

thead th p {
  position: absolute;
  bottom: 20px;
  transform: rotate(-90deg);
  text-align: left;
}

table th,
table th p,
table td {
  width: 75px;
}

table td {
  text-align: center;
}

table tr td:first-of-type {
  text-align: left;
}

table tr:nth-of-type(odd) td {
  background: #eee;
}

table tr:nth-of-type(even) td {
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>

<table id="simpleTable" class='vrt-header'>

  <thead>
    <tr>
      <th data-sort="string"></th>
      <th data-sort="int">
        <p>Republican</p>
      </th>
      <th data-sort="int">
        <p>Democrat</p>
      </th>
      <th data-sort="int">
        <p>Libertarian</p>
      </th>
      <th data-sort="int">
        <p>Green</p>
      </th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>
        Alabama
      </td>
      <td>
        65
      </td>
      <td>
        25
      </td>
      <td>
        10
      </td>
      <td>
        0
      </td>
    </tr>

    <!-- Additional rows -->

  </tbody>


</table>

Hope this helps!

Answer 2

I've made some adjustments to your code...

Unfortunately, I couldn't find a better way to always display the scrollbar other than using overflow-y: scroll;.
I tried various styling changes for your headers but struggled with dynamically adjusting their height after applying transform. Ended up using fixed values.
The updated styling should address this issue.
You might want to look into the Stupid Table Plugin for jQuery, it can simplify table sorting.

In addition, I included:

Added some hover effects using :hover on the th elements to highlight actions.
Implemented row color alternation using the :nth-of-type() selector.

Here's the revised snippet:

// Find documentation here: https://joequery.github.io/Stupid-Table-Plugin/
$("#simpleTable").stupidtable();

table thead,
table tbody {
  display: block;
}

table tbody {
  height: 500px;
  overflow-y: scroll; /* Ensures scrollbar visibility */
}

thead th {
  position: relative;
  cursor: pointer;
  height: 90px;
  background: #ccc;
  border-bottom: 2px solid black;
}

thead th:hover {
  background: #ccf; 
}

thead th p {
  position: absolute;
  bottom: 20px;
  transform: rotate(-90deg);
  text-align: left;
}

table th,
table th p,
table td {
  width: 75px;
}

table td {
  text-align: center;
}

table tr td:first-of-type {
  text-align: left;
}

table tr:nth-of-type(odd) td {
  background: #eee;
}

table tr:nth-of-type(even) td {
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>

<table id="simpleTable" class='vrt-header'>

  <thead>
    <tr>
      <th data-sort="string"></th>
      <th data-sort="int">
        <p>Republican</p>
      </th>
      <th data-sort="int">
        <p>Democrat</p>
      </th>
      <th data-sort="int">
        <p>Libertarian</p>
      </th>
      <th data-sort="int">
        <p>Green</p>
      </th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td>
        Alabama
      </td>
      <td>
        65
      </td>
      <td>
        25
      </td>
      <td>
        10
      </td>
      <td>
        0
      </td>
    </tr>

    <!-- Additional rows -->

  </tbody>


</table>

Hope this helps!

Answer 3

Answer №2

1) It seems like this issue is related to using a Mac, which has overlay scrollbars as the default. Chrome and Safari have support for webkit-scroll properties that allow you to make the scrollbar always visible, but it may not be possible to override this behavior in Firefox.

2) The problem could also be caused by the UA style sheet's 'th' entry: 'td, th { padding: 1px; }'. You can try overriding it with 'th { padding: 0px; }'

3) The desired behavior of the table should actually be the default, but there are two main reasons why it might not be working. This could be a challenging issue to address without using an existing component. Instead of trying to solve it from scratch, consider finding a ready-made solution such as a jQuery plugin or Angular component. Implementing all these features in a cross-browser compatible way would likely require writing a significant amount of JavaScript code.

The first reason for the issue is that setting 'div.vertical { position:absolute }' removes the elements from the normal flow, causing alignment issues with the header columns.

The second reason is that inadvertently creating three tables due to 'tr { display:block }' and 'tbody {display:block}' settings enables scrolling. The layout interprets them as regular 'div' elements, resulting in nested tables within each other.

Even if you were able to address the first issue, the multiple nested structures would still pose a challenge.

Chrome's layout tree provides insight into the structure, showing how each element is rendered within the table.

Answer 4

1) It seems like this issue is related to using a Mac, which has overlay scrollbars as the default. Chrome and Safari have support for webkit-scroll properties that allow you to make the scrollbar always visible, but it may not be possible to override this behavior in Firefox.

2) The problem could also be caused by the UA style sheet's 'th' entry: 'td, th { padding: 1px; }'. You can try overriding it with 'th { padding: 0px; }'

3) The desired behavior of the table should actually be the default, but there are two main reasons why it might not be working. This could be a challenging issue to address without using an existing component. Instead of trying to solve it from scratch, consider finding a ready-made solution such as a jQuery plugin or Angular component. Implementing all these features in a cross-browser compatible way would likely require writing a significant amount of JavaScript code.

The first reason for the issue is that setting 'div.vertical { position:absolute }' removes the elements from the normal flow, causing alignment issues with the header columns.

The second reason is that inadvertently creating three tables due to 'tr { display:block }' and 'tbody {display:block}' settings enables scrolling. The layout interprets them as regular 'div' elements, resulting in nested tables within each other.

Even if you were able to address the first issue, the multiple nested structures would still pose a challenge.

Chrome's layout tree provides insight into the structure, showing how each element is rendered within the table.

Answer 5

Answer №3

Following your instructions, I successfully implemented all four tasks using primarily CSS.

To test it out, you can visit: https://jsfiddle.net/xpvt214o/246746/show
Alternatively, you can view the code on this fiddle link: https://jsfiddle.net/xpvt214o/246746/

I even managed to style the third question using only CSS! By setting the height with padding and a wrapping div for 'th', like so:

th.vertical {
  height: 0;
  vertical-align: bottom;
  text-align: left;
  cursor: pointer;
}
div.verticalWrapper {
    height: 0;
    padding-top: 100%;
    position: relative;
}

Note the importance of padding-top: 100%

1) To achieve this effect, I created a container div for the table.

.tableContainer {
  height: 400px;
  width: 500px;
  overflow: scroll;
}

Regarding iOS compatibility, it's simply about personal preference:

2) As we're rotating the element, the height should match the width. I solved this using CSS, and more details can be found in this answer: here

3) The transformation was done through CSS.

4) I followed the same approach as mentioned by @takit-isy

Answer 6

Following your instructions, I successfully implemented all four tasks using primarily CSS.

To test it out, you can visit: https://jsfiddle.net/xpvt214o/246746/show
Alternatively, you can view the code on this fiddle link: https://jsfiddle.net/xpvt214o/246746/

I even managed to style the third question using only CSS! By setting the height with padding and a wrapping div for 'th', like so:

th.vertical {
  height: 0;
  vertical-align: bottom;
  text-align: left;
  cursor: pointer;
}
div.verticalWrapper {
    height: 0;
    padding-top: 100%;
    position: relative;
}

Note the importance of padding-top: 100%

1) To achieve this effect, I created a container div for the table.

.tableContainer {
  height: 400px;
  width: 500px;
  overflow: scroll;
}

Regarding iOS compatibility, it's simply about personal preference:

2) As we're rotating the element, the height should match the width. I solved this using CSS, and more details can be found in this answer: here

3) The transformation was done through CSS.

4) I followed the same approach as mentioned by @takit-isy

Answer 7

Answer №4

Completing this task will require some effort. I recommend using divs instead of tables.

I created a sample to demonstrate how it could be structured:

<div class='table'>
  <div class='header'>
    <div><p class="vertical first">&nbsp;</p></div>
    <div><p class="vertical">Republican</p></div>
    <div><p class="vertical">Democrat</p></div>
    <div><p class="vertical">Libertarian</p></div>
    <div><p class="vertical">Green</p></div>
  </div>
  <div class='scroller'>
    <div class='content'>
      <div>
        <div>Alabama</div>
        <div>65</div>
        <div>25</div>
        <div>10</div>
        <div>0</div>
      </div>

      (Other states and data entries)

    </div>
  </div>
</div>

.table{
  height:300px;
  width:500px;

}
.vertical{
  transform: rotate(-90deg);
  width:56px;
  margin:0px;
}
.first{
  padding-right: 268px;
}
.header{
  height:150px;
  width:500px;
  display:flex;
}
.header>div{
  display:flex;
}
.scroller{
 height:calc(100% - 50px);
 overflow-y:scroll;
}
.content{
  width:100%;
  display:table;
}
.content>div{
  display:table-row;
  width:500px;
}
.content>div>div{
  display:table-cell;
}

http://jsfiddle.net/xjhun7zf/6/`

(Please note that this is a quick demonstration created in 20 minutes)

If you separate the content into two containers - one for the header and one for the body, you can fix the position and height of the header while allowing the body to occupy the rest of the space;

Answer 8

Completing this task will require some effort. I recommend using divs instead of tables.

I created a sample to demonstrate how it could be structured:

<div class='table'>
  <div class='header'>
    <div><p class="vertical first">&nbsp;</p></div>
    <div><p class="vertical">Republican</p></div>
    <div><p class="vertical">Democrat</p></div>
    <div><p class="vertical">Libertarian</p></div>
    <div><p class="vertical">Green</p></div>
  </div>
  <div class='scroller'>
    <div class='content'>
      <div>
        <div>Alabama</div>
        <div>65</div>
        <div>25</div>
        <div>10</div>
        <div>0</div>
      </div>

      (Other states and data entries)

    </div>
  </div>
</div>

.table{
  height:300px;
  width:500px;

}
.vertical{
  transform: rotate(-90deg);
  width:56px;
  margin:0px;
}
.first{
  padding-right: 268px;
}
.header{
  height:150px;
  width:500px;
  display:flex;
}
.header>div{
  display:flex;
}
.scroller{
 height:calc(100% - 50px);
 overflow-y:scroll;
}
.content{
  width:100%;
  display:table;
}
.content>div{
  display:table-row;
  width:500px;
}
.content>div>div{
  display:table-cell;
}

http://jsfiddle.net/xjhun7zf/6/`

(Please note that this is a quick demonstration created in 20 minutes)

If you separate the content into two containers - one for the header and one for the body, you can fix the position and height of the header while allowing the body to occupy the rest of the space;

Vertical text frozen at the top of a table

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to duplicate an image on both sides in a vertical manner?

What is the reason behind frameworks and similar tools choosing to deprecate functions rather than simply updating them?

An error occurred when attempting to hide or show a jQuery loading animation

Reinvent the AJAX functionality

The ng-click event is not triggering the Controller Function as expected

What is the preferred convention for defining AngularJS directives as "attributes" versus "elements"?

Iterate through the classes for updates rather than focusing on individual id fields

Using two modal popups while passing an identifier

What is the best way to include a string in formData when making an ajax request

Is there a way to display the contents of a zipped file using an HTML IFrame?

As you scroll, the opacity gradually increases, creating a dynamic visual

Aligning a div in relation to the background image

Change the default content of the jQuery menu with a content changer

Is it possible to refresh HTML content using jQuery?

Executing a mouse click on a dynamic button using Selenium IDE

Using the OR selector in a complex selector with jQuery

I would like to retrieve my data using my personal API and have them displayed as checkboxes

Eliminate the prior click action from the document object model

Restricting the height of the grid list in Vuetify

Selenium - How to effectively obtain hyperlinks?