Alignment and placement of rotated text within a table or grid in a vertical position

Struggling to rotate text in an HTML table, I've encountered alignment and text flow issues no matter what. Various CSS combinations of writing-mode and rotate have been attempted but the problem persists. Here is the test table:

Code snippet:

table {
  margin-left: auto;
  margin-right: auto;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.c90bt {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
<table cellpadding="2" cellspacing="0">
  <col>
  <col>
  <col>
  <tr>
    <td rowspan="3">
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
    </td>
    <td>
      <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>
    </td>
    <td rowspan="3">
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western"><img src="https://universaltheosophy.com/resources/sd-2-300-blank.png"></p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
    </td>
  </tr>
</table>

The main issues are at two places:

  1. The rotated text doesn't align properly within the top and bottom boundaries of the table td element. It either extends outside or becomes squished together.

  2. The horizontal alignment of the text is far off from the image at the center. Desired look is tight alignment between the rotated text and the image.

Edit

To address a comment regarding rowspans, here's the same table without them with similar outcomes:

table {
  margin-left: auto;
  margin-right: auto;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.c90bt {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
<table cellpadding="5" cellspacing="0">
  <col>
  <col>
  <col>
  <tr>
    <td colspan="3">
      <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY.</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
    </td>
    <td>
      <p class="text-body-2-western"><img src="https://universaltheosophy.com/resources/sd-2-300-blank.png" class="img1"></p>
    </td>
    <td>
      <p class="text-body-2-western c90bt"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
    </td>
  </tr>
  <tr>
    <td colspan="3">
      <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
    </td>
  </tr>
</table>

htmlcsshtml-tablerotationcss-grid

Answer №1

Here's an alternative approach to solving your issue using CSS grid layout:

  1. Change the structure without relying on tables. Utilize grid layout with display: grid - note that &nbsp in the code represents an empty grid item.
  2. Create a three-column layout with columns set to min-content width by using 
    grid-template-columns: repeat(3, min-content)
    on the container element.
  3. Adjust the second row height to match the middle element by setting 
    grid-template-rows: 1fr min-content

  4. To align vertically, I implement writing-mode:

    .wmode {
   writing-mode: tb-rl;
   transform: rotate(-180deg);
}

Check out the demonstration below:

.container {
  display: grid;
  grid-template-columns: repeat(3, min-content);
  grid-template-rows: 1fr min-content;
  justify-content: center;
}

.c10 {
  font-variant: small-caps;
}

.text-body-2-western {
  text-align: center;
  text-indent: 0em;
}

.wmode {
  writing-mode: tb-rl;
  transform: rotate(-180deg);
}
<div class="container">
  &nbsp;
  <p class="text-body-2-western">MAIN TITLE OF THE TABLE SHOULD CENTER HORIZONTALLY</p>
  &nbsp;
  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits.</p>
  <img src="https://via.placeholder.com/400x338?text=image">
  <p class="text-body-2-western wmode"><span class="c10">test title.</span><br>this is a test string of text rotated vertically that should fit within the table td limits but for some reason reaches outside of it.</p>
  &nbsp;
  <p class="text-body-2-western text-body-no-spacing"><span class="c10">bottom title in small caps.</span></p>
  &nbsp;
</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

Feeling a bit lost on my first JQuery project, could use some

Yesterday, a kind person on this platform assisted me greatly in building my first validation from scratch. I have made significant progress since then. This is my first time working with JQuery, so I apologize in advance for my messy code. Everything work ...

phpjavascriptjqueryhtml

Is it possible for URLs in CSS Custom Properties to be relative to the CSS file where they are defined?

I have a CSS library with resources like images and fonts that can be accessed from anywhere via CDN. I am trying to create URLs for these resources as Custom CSS Properties, relative to the library. <!-- https://my.server/index.html --> <link rel ...

htmlcss

Hidden footer error has been resolved despite background visibility

Greetings! This marks my debut post on this platform. I've encountered a minor setback with the current website project I am working on. As I have implemented a CSS parallax header, I aimed to create a distinctive footer as well. The concept was to ...

htmlcssscrollfooterfixed

Attempting to disrupt the PHP script responsible for handling the form data sent via the $_POST method

I have been searching for specific information on this issue. My HTML5 form... outputs to an external PHP script saves the form data as $_SESSION variables in PHP transfers the variables to another page for display I haven't yet escaped any of the ...

phphtmlformspostxss

VueJS / v-html is displaying a blank page (Bokeh-html)

Especially as a newcomer to VueJS, I am currently in the process of trying to showcase a local HTML file within the Vue Application. The method I'm using to fetch the HTML file involves Axios, here's how it goes: <template> <div> ...

javascripthtmljsonvue.jsbokeh

Transmit a parameter from a JavaScript code to a Python script

I am using a python script to execute queries in an Oracle Database by passing arguments. prov.py #!/usr/local/bin/python2.7 import sys import argparse import cx_Oracle import json import cgi import cgitb cgitb.enable() lst_proveedores=[{}] conn_str = & ...

javascriptpythonhtmlajax

I am looking to identify when the focus event occurs on all HTML input elements on a page without using addEventListener or any HTML attributes

Does anyone know a way to detect the focus event on all HTML input elements on a page without using the addEventListener function or HTML attributes? I was successful in detecting click events with the following code: onclick = () => { // do somethi ...

javascripthtmlfrontenddom-events

Challenges of Python Web Scraping: Insufficient Extraction of HTML Code

As someone new to Python, I am currently experiencing difficulties with my web scraping code. The script is able to access the website and bypass cookies successfully. However, it is failing to capture the entire HTML code. Here is a snippet of the HTML c ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

What is the best way to visually highlight the selected item in a list with a special effect?

I have a list that I'd like to enhance by adding an effect to the selected item after a click event. For instance, after clicking on the first item 'Complémentaire forfait', I want to visually highlight it to indicate that it has been selec ...

javascriptjqueryhtmlbootstrap-4

Incorporating rounded corners to an embedded YouTube video

Check out this JSFiddle link. The border-radius property appears to be working correctly at first, but then the rounded corners suddenly disappear shortly after loading. Is there a way to apply rounded corners to YouTube videos that are embedded on a webp ...

cssyoutube

Determining the XY position of the wheel data

In my attempt to develop a lucky draw wheel using reactjs, I needed to position all the input data at specific XY coordinates. Below is an example of the expected output XY positions that I require. var renderData = ["1", "2", "3", "4", "5", "6", "7", " ...

javascripthtmlcssreactjsstyles

Process the HTML content in PHP only after it has finished loading

When attempting to parse an HTML page using PHP with DOMDocument, I encountered an issue where a javascript on the page was updating an element after the DOMDocument loaded the page. This resulted in parsing the HTML before the elements were fully update ...

phphtmlparsingdomdomdocument

Guide on creating a donut visualization with canvas?

I am in need of assistance, as I am trying to create a donut chart using canvas and JavaScript. Here is the code I have so far, but I am unsure how to complete it: <body> <canvas id="chart" width="500" height="500" style="background-color:bl ...

javascripthtmlcanvas

Executing a script for every row in a table using Python and Selenium

As a newcomer to Python and Selenium, I have been struggling with a specific task for days now. Despite my efforts to search and experiment, I find myself completely stuck. My goal is to access sales records within a table that contains information about ...

pythonhtmlseleniumhtml-table

The request to "http:192.200.2.2/example.com/api/value" resulted in a 405 (Method Not Allowed) error, and the response for prelight included an invalid HTTP status code of 405

Is there a way to call an API from an HTML page using AngularJS? I have written the following script in my HTML page: $http({ method:'POST', url:'http:192.200.2.2/example.com/api/value', headers:{ X-EXAMPLE.COM-WEB- ...

htmlangularjs

The issue with the min attribute for number inputs not functioning properly when using decimal

When inputting the value 3 in the field and clicking on submit in the HTML snippet below, Chrome displays an error message stating: Please enter a valid value. The two nearest valid values are 2.0001 and 3.0001. This is confusing because I have set the mi ...

javascripthtml

Tips for ensuring v-tabs-items and v-tab-item fill height

I found an example that I am trying to follow at the following link: https://vuetifyjs.com/en/components/tabs#content <v-tabs-items v-model="model"> <v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`" > < ...

cssvue.jsvuetify.js

Is there a way to narrow down the font choices using HTMLPurifier?

- Currently in my project, I have incorporated an HTML-WYSIWYG Editor that allows users to utilize various Webfonts for styling their texts. The editor I am utilizing can be found at NiceEdit. It generates code snippets such as: <font face="c ...

phphtmlfontswysiwyghtmlpurifier

Statement featuring session parameter for querying

Is it appropriate to include session variables in a SQL query? The following is an example of a query I am working with: $sql="SELECT teacher.f_name,attendance.student_id,attendance.SNO ,attendance.s_section,attendance.DateTime FROM teach,subject,teacher ...

phphtmlmysqlmysqli

Styling CSS for Centering a Heading on an Image's Center

Struggling to center an h3 heading in the middle of an image within a grid? Look no further, as I have 3 images across one row - four columns per image/heading. Check out the desired layout https://i.stack.imgur.com/8VFRt.png I've managed to center t ...

htmlimagecss