Is there a way to make text in a table header scroll vertically?

I am facing an issue with a table displaying vertical text in the header. Here is a simplified example:

FIDDLE

HTML & CSS

div.vertical {
  margin-left: -100px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

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

td,
th {
  padding: 5px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}
<div class="row" style="margin-top: 20px;margin-left: 10px;">
  <div class="col-md-12">
    <div class="table-responsive">
      <table>
        <thead>
          <tr>
            <th class="vertical">
              <div class="vertical">Really long and complex 1</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 2</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

When there are many columns, the table container starts scrolling. Take a look at this:

FIDDLE

However, I noticed that the header does not scroll along when the rest of the table is scrolled. This was due to using position: absolute in the div.vertical class. Removing this style makes the header scroll but causes the header width to increase significantly. You can see it here:

FIDDLE

Is there a way to achieve both scrolling functionality and maintain a small header width using only CSS? Thank you!

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Include position: relative in the styling of th.vertical

Check out this fiddle for reference

div.vertical {
  margin-left: -100px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 25px;
  text-align: left;
  position: relative; /* Include this property */
}

td,
th {
  padding: 5px;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
}
<div class="row" style="margin-top: 20px;margin-left: 10px;">
  <div class="col-md-12">
    <div class="table-responsive">

      <table>
        <thead>
          <tr>
            <th class="vertical">
              <div class="vertical">Really long and complex 1</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 2</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            
            <!-- More table data entries here -->

            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 2</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            
            <!-- More table data entries here -->
            
            <td>HH</td>
          </tr>
        </tbody>
      </table>

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

Answer №2

For more information: writing-mode

.vertical {
  writing-mode:vertical-lr
}
<div class="row" style="margin-top: 20px;margin-left: 10px;">
  <div class="col-md-12">
    <div class="table-responsive">

      <table>
        <thead>
          <tr>
            <th class="vertical">
              <div class="vertical">Really long and complex 1</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 2</div>
            </th>
            <th class="vertical">
              <div class="vertical">Really long and complex 3</div>
            </th>
            (more rows here)
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>AH</td>
            <td>BH</td>
            <td>HH</td>
            (more data here)
          </tr>
        </tbody>
      </table>

    </div>
  </div>

For a similar solution, check out: Rotating Text Within A Fixed Div

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fluid animation using CSS for recently added elements in a scrolling list

I've been searching for a way to create a smooth animation effect when a new element is added to a scrolling list. For example, as a new element is added to the top of the list and older elements are pushed down, I want the transition to be visually ...

htmlcssangularscrollfrontend

Java code to extract and delete a section of a website on a webpage

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View view = inflater.inflate(R.layout.fwebview, container, false); webView = (WebView) view.findViewById(R.id.webView); String url = ge ...

javascriptjavaandroidhtml

Automatically generating new lines of grid-template-columns with CSS grid

I am new to using grid in CSS and there are still some concepts that I don't quite understand. Below is the container I am working with: <section class="css-grid"> <div class="css-item"><img src="1.jpg" / ...

htmlcsscss-grid

Automatically navigate to a specific element as the user scrolls down the page

I am attempting to achieve a similar effect as seen on the App Builder Website. When the user reaches the header with the background image/video and scrolls down, the website smoothly transitions to the next div/section. If the user scrolls back up and ret ...

javascriptjqueryhtmlscroll

The animation will only activate upon the initial click of the button

I'm looking to add a simple text animation to my website. The idea is that when a button is clicked, the text transitions from being fully transparent to fully visible, and then back to transparent. I've written some code to achieve this animatio ...

javascripthtmljquerycss

Utilizing CSS classes to style custom day templates in ng-bootstraps datepicker

Currently, I am utilizing ng-bootstraps datepicker to showcase user data on a daily basis. I have implemented a custom day template to apply specific CSS classes. <ng-template #customDay let-date> <div class="custom-day" [ngCla ...

cssangulartypescriptdatepickerng-bootstrap

How to use JavaScript to hide an element (field) in XPages

In XPages, I understand that only editable fields are able to retrieve values from context. My question is: how can I hide a field using CSS or JavaScript in XPages while still being able to get its value from the context? Many thanks ...

javascriptcssfieldhidexpages

Ways to remove content that exceeds the boundaries of a div element

I am facing a challenge with a parent div that has a specified size. Inside this parent div, there are other child divs, and if any of those child divs start displaying their content outside of the parent div, I want to completely remove that div. I do not ...

cssblazor

Discovering the true width of an element using JavaScript

Hey there, I'm currently attempting to determine the exact width of a specific element and display an alert that shows this width. The code I am using is as follows: HTML Element <table cellspacing="1" cellpadding="5" style=";width:975px;border: ...

javascriptjqueryhtml

Error message encountered due to inconsistency in function scope within a JavaScript

I have a code and it does the following var Device = function(data){ this.list = data; Device.prototype.getList = function(){ return list; }; Device.prototype.foo = function(callback){ navigator.geolocation.watchPosition( ...

javascripthtmlcallbackscope

Ways to add space around the td element and properly align the content within it

I've recently delved into the realm of web development, and I'm encountering some challenges with HTML alignment. Despite exploring various resources and attempting to utilize align="left"/right/center attributes, I'm still struggling to ach ...

htmlcss

A guide on implementing multiple ternary operators in a Vue.js template

Is it possible for a template to return three different values instead of just two, based on the data? I am familiar with using two conditions, but is there a way to use more than two without getting a syntax error? <option {{ change === 1 ? &apos ...

javascripthtmlvue.jsvuexconditional-operator

Formatting text and images in CSS

Looking to align images at the bottom of each column in a div with 3 columns, but struggling due to varying text lengths. Any tips on how to achieve this? https://i.sstatic.net/fuPgl.png Thank you, Carolin #content_row{ margin-top:150px; marg ...

htmlcssbootstrap-4

Enhancing the appearance of individual cells within an HTML table by applying custom classes

I'm in the process of automating report generation for my organization. Our workflow involves using R to summarize data from Excel, then utilizing Rmarkdown, knitr, and the "htmlTable" package to generate HTML files. Currently, I am implementing CSS ...

javascripthtmlrhtml-table

How can I utilize CSS to dictate color schemes on an HTML5 canvas element?

Currently, I am working on a checkers project where the first step is to create the initial board. The way we are currently implementing this has raised a philosophical concern. We are using the fillRect function to define the color of the "dark" squares a ...

csshtml

Tips for creating a unified user interface framework for various web applications sharing a consistent design

Struggling to create a user interface framework for multiple web applications, I'm faced with the challenge of setting up the infrastructure in our unique situation: We have 7 (or more) different web applications built using asp.net mvc Some of thes ...

javascriptasp.netcssframeworkscdn

Could the Google Font "Exo 2" be causing the size issue with HTML Canvas 2DContext.font?

As I work on creating a canvas and adding text to it, I have encountered an issue with the font Exo 2. Every other font works perfectly except for this one. Exo 2 is a Google font, and my suspicion is that the number "2" at the end of the name might be ca ...

htmlcanvasthree.jshtml5-canvaswebfonts

When JQuery inserts HTML code, the alignment may differ compared to when the HTML code is written

Important: Check out the comments made by Brandson below, as it contains the correct response. I have created a basic form that allows users to enter various languages (such as english, french, spanish, etc) and their respective proficiency levels (simila ...

jqueryhtmlcsstwitter-bootstrap

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Is there a way to make the height of my div tag always equal to the height of the browser's window, so it adjusts automatically when the browser is resized? I have tried using .class { height: 100%; } But this doesn't work. I've learne ...

javascriptjqueryhtmlcssresponsive

Using jQuery to update a variable value based on user selection from a dropdown menu populated with database values

I am currently stuck on a project where I need to dynamically change the content of a DIV based on the selection made in a dropdown using jQuery. For example, here is what I want to achieve: <select name=""> <option value="10">10 clicks</o ...

javascriptphpjqueryhtmljquery-ui