Aligning rotated text in a bootstrap 4 table header

In my Bootstrap 4 project, I'm having difficulties with positioning rotated text within a table header. My goal is to align all the rotated text at the bottom of the cell and centered horizontally. Despite trying different transform-origins, it seems that center is the most appropriate one?

Can anyone explain why the cell text for the rotated headers ends up outside the boundaries of the cell borders?

.table-rotated-header {
  transform-origin: center;
  transform: rotate(-90deg);
  height: 250px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">

  <thead>
    <tr>
      <th>&nbsp;</th>
      <th colspan="5" class="text-center">
        <h3>Paint</h3</th>
          <th colspan="2" class="text-center">
            <h3>Wheels</h3>
          </th>
          <th colspan="2" class="text-center">
            <h3>Interior</h3>
          </th>
    </tr>
    <tr>
      <th nowrap class="table-rotated-header">
        <h5>Country</h5>
      </th>
      <th nowrap class="table-rotated-header">
        <h5>White</h5>
      </th>
      <th nowrap class="table-rotated-header">
        <h5>Red</h5>
      </th>
      <th nowrap class="table-rotated-header">
        <h5>Blue</h5>
      </th>
      <th nowrap class="table-rotated-header">
        <h5>Black</h5>
      </th>
      <th nowrap class="table-rotated-header">
        <h5>Yellow</h5>
      </th>
      <th nowrap class="table-rotated-header">
        <h5>18&quot; Spider</h5>
      </th>
      <th nowrap class="table-rotated-header">
        <h5>19&quot; Sport</h5>
      </th>
      <th nowrap class="table-rotated-header">
        <h5>Black</h5>
      </th>
      <th nowrap class="table-rotated-header">
        <h5>White</h5>
      </th>

    </tr>
  </thead>

  <tbody>
    <tr>
      <td>South Korea</td>
      <td class="text-end">$10,400</td>
      <td class="text-end">$900</td>
      <td class="text-end">$0</td>
      <td class="text-end">$0</td>
      <td class="text-end">Included</td>
      <td class="text-end">$900</td>
      <td class="text-end">$12,200</td>
      <td class="text-end">$6000</td>
      <td class="text-end">$6000</td>
    </tr>
  </tbody>
</table>

htmlcssbootstrap-4

Answer №1

I suggest implementing a flex approach:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotated Table Header</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        /* CSS for Rotated Table Header */
        .table-rotated-header {
            writing-mode: vertical-rl; /* Vertical text */
            text-orientation: mixed; /* Maintain horizontal layout */
            white-space: nowrap;
            text-align: center;
        }

        /* Style the table as needed */
        .table {
            border-collapse: collapse;
            width: 100%;
        }

        /* Additional styling for cells */
        .table th,
        .table td {
            border: 1px solid #ccc; /* Add borders for better visualization */
            padding: 8px; /* Add padding for cell content */
            text-align: center; /* Center text horizontally */
        }
    </style>
</head>
<body>
    <table class="table">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>
                    <h3>Paint</h3>
                </th>
                <th>
                    <h3>Wheels</h3>
                </th>
                <th>
                    <h3>Interior</h3>
                </th>
            </tr>
            <tr>
                <th>
                    <h5>Country</h5>
                </th>
                <th class="table-rotated-header">White</th>
                <th class="table-rotated-header">Red</th>
                <th class="table-rotated-header">Blue</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>South Korea</td>
                <td class="text-center">$10,400</td>
                <td class="text-center">$900</td>
                <td class="text-center">$0</td>
            </tr>
            <!-- Add more rows as needed -->
        </tbody>
    </table>
</body>
</html>

Here is an edited version after receiving feedback:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotated Table Header</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        /* CSS for Rotated Table Header */
        .table-rotated-header {
            writing-mode: vertical-rl; /* Vertical text */
            text-orientation: mixed; /* Maintain horizontal layout */
            white-space: nowrap;
            text-align: center;
            transform: rotate(180deg);
            text-orientation: mixed; /* Maintain horizontal layout */

        }

        /* Style the table as needed */
        .table {
            border-collapse: collapse;
            width: 100%;
        }

        /* Additional styling for cells */
        .table th,
        .table td {
            border: 1px solid #ccc; /* Add borders for better visualization */
            padding: 8px; /* Add padding for cell content */
            text-align: center; /* Center text horizontally */
        }
    </style>
</head>
<body>
    <table class="table">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>
                    <h3>Paint</h3>
                </th>
                <th>
                    <h3>Wheels</h3>
                </th>
                <th>
                    <h3>Interior</h3>
                </th>
            </tr>
            <tr>
                <th>
                    <h5>Country</h5>
                </th>
                <th class="table-rotated-header">White</th>
                <th class="table-rotated-header">Red</th>
                <th class="table-rotated-header">Blue</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>South Korea</td>
                <td class="text-center">$10,400</td>
                <td class="text-center">$900</td>
                <td class="text-center">$0</td>
            </tr>
            <!-- Add more rows as needed -->
        </tbody>
    </table>
</body>
</html>

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

When viewed on mobile browsers, the side-by-side divs in a tabbed layout appear to be

Looking for some help with responsive design for the "PORTFOLIO ATTRIBUTES" tab on my website. On desktop, the content displays fine, but on mobile it overlaps and cuts off. Here's the link to the page in question: . Any suggestions on how to maintai ...

htmlcssresponsive-design

Adjusting Google Maps API v3 Autocomplete dropdown width with JavaScript and SASS to match input field dimensions

I am facing an issue where the autocomplete dropdown (div with class "pac-container") is consistently 4 pixels shy of aligning perfectly with the right side of the input field. It looks like this: https://i.sstatic.net/Y0oq1.png Below is the HTML code: ...

javascriptcssgoogle-mapsgoogle-maps-api-3sass

show an interactive table with 2 columns for easy printing

My table is generated dynamically to display the work done by employees within a specific time period. Each work item is listed as a new row with 4 columns containing information on time spent, costs, etc. The data looks like this: Worker1 mailservice | ...

htmlcssprintinghtml-table

Creating dynamic movement on webpages using CSS3 Animations

Exploring the world of CSS animations is such a blast! I've created this fiddle to play around with the concept of wheels on a bus. Check out my JS Fiddle here One strange thing I noticed is that sometimes there's a white space between the two ...

csscss-animations

Clickable image in HTML that sends a request to an ActionResult

In my MVC project, I am attempting to create an HTML image button within a search box that will redirect to an ActionResult. My current setup looks like this: <input type="text" id="Text1" name="seachKeyword" class="searchTextBox" value="Search" style ...

c#htmlasp.net-mvcvisual-studio-2010

I want each <li> element to have a unique background image

I'm a beginner in HTML and I have created a simple webpage with a div called "navbar" containing a list ('ul') of buttons. Each button should have a different background image, which I created in Photoshop. I tried giving each 'li' ...

htmlcsshtml-lists

Tips for adding style to a child component from a parent component with multiple child components

I am faced with a situation where I have a child component in the form of a spinner that I need to display in two different places, each with its own unique style. In order to achieve this, I have attempted the following approach: my-loading-overlay ::ng-d ...

cssangularparent-child

Initiate an "execute.document" command directly from the address bar

While reviewing my old website, I stumbled upon this snippet: <input type="image" id="QuickPass" name="QuickPass" src="/images/QuickPass.gif" alt="Quick Pass" onclick="document.pressed=this.value" value="QuickPass" /> nestled within this form: & ...

javascripthtmlurl

Acquire a tabletop device capable of instantly updating data

I am looking to retrieve data and display it in a table that allows for direct editing. This means the information fetched from the database should be shown in input boxes within the table, enabling users to make changes directly. Below is the code snippe ...

phphtml

Subnav sticks when scrolling down but becomes unresponsive on resizing

My webpage has a main header that sticks to the top of the window and a subnav fixed at the bottom. The hero image adjusts its height based on the window minus the header and subnav heights. When scrolling past the subnav, it sticks just below the main nav ...

jquerycss

Customize the appearance of the Login button in your Keycloak theme by changing its color

Currently, I am working on customizing the login theme in keycloak. One particular issue I am facing is changing the color of the login button. Despite my attempts to modify the CSS code as shown below, the intended color change does not seem to take effec ...

csskeycloak

Guide to customizing margins at specific breakpoints in Bootstrap 4 without using javascript

Despite exploring numerous solutions and trying them out, I have yet to achieve the desired results. I am looking to customize margins for various breakpoints in Bootstrap. For example: View for laptops, Tablet view The issue may be related to defined w ...

htmlcssbootstrap-4responsive-design

Having trouble accessing a CSS file through HTML

Is there a reason why I am facing difficulties accessing main.css from app.html to enable Tailwind CSS? When I try putting it in the style brackets in the .svelte file itself, it throws an error. Can anyone explain why this is happening? <link rel= ...

htmlcsstailwind-csssvelte

Is SqliteDataReader not compatible with C#?

Currently, I am facing an issue with displaying data from a SQLite database on a web page using C#. Despite my efforts to find a solution and only coming across the console.writeline method, the SqliteDataReader function is not functioning properly. Below ...

c#htmlmysqldatabasesqlite

Tips for duplicating all data shown using v-for in Vue and saving it to the clipboard

I have a page that displays threaddump information using cards. The threaddump information is shown using v-for loops, but the issue is that when I copy it, only a single loop of data gets copied with my current copyThreadInfoToClipboard method. Therefor ...

javascripthtmlvue.jsbootstrap-vue

Creating a dynamic className string in JavaScript with React

In my current project, I'm implementing mobile support by creating separate styles for desktop and mobile. Although most components are the same on both platforms, I have two .scss files dedicated to each. To apply the correct styles, I use a combina ...

javascriptcssreactjswebsass

Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed. Here is the HTML code: <div id="main-content" class="container animated"> ...

javascriptjqueryhtmlcss

Implement a vertical bar to appear next to the tree view when it is expanded

I am struggling to implement a vertical line for the first level of list items when they are expanded and remove it when they are closed. I have tried using li::after but it doesn't seem to work. Can someone provide guidance on how to achieve this? T ...

javascripthtmljquerycssdom

Conceal the HTML element within a subscription

Currently, I am utilizing Angular and have a checkbox that I need to toggle visibility based on the response of an API call subscription. The issue lies in a delay when trying to hide the checkbox (as it is initially set to visible). My assumption is that ...

htmlangulartypescriptangular-material

Tips for aligning a Bootstrap container in the middle of the viewport vertically

I'm struggling to center a Bootstrap container vertically in the viewport. You can view my code at http://www.bootply.com/C8vhHTifcE All of my attempts at centering have been unsuccessful. Does anyone have a solution? Just to clarify: I want the co ...

htmlcsstwitter-bootstrap