Color the entire rotated <th> element with a background shade

I have come across a unique issue that I cannot find a solution for on Stack Overflow or anywhere else. I am creating a comparison chart and need the <th> text to be rotated 270 degrees with zebra-striping on even columns. The problem is that while the <td>s fill the background area perfectly, the rotated <th>s only fill the background behind the text. I have tried setting the height to 100% as suggested by other examples, but it did not work. Adding width of 100% throws off the entire table. I am looking for a simple solution to this problem. Thank you in advance for any recommendations.

Update: Here are the relevant styles being applied to the rotated th:

th.headertext {
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    text-align: left;
    bottom: 56px;
    position: relative;
}

td:nth-child(even), th:nth-child(even) {
    background-color: #efefef;
}

th {
    font-size: 16px;
    font-weight: bold;
    height: 100%;
    line-height: 100%;
}

td, th {
    text-align: center;
    border-bottom: solid 1px #ccc;
    font-size: 12px;
    padding: 6px;
    word-wrap: break-word;
}
htmlcssbackground-colorcss-tables

Answer №1

If you're attempting to rotate the th elements themselves, reconsider your approach. Rotating the th elements will only result in them being as wide as their unrotated height.
Instead, a more effective solution is to place divs within the th elements and rotate those. This way, you are not restricted to all cells having the same width.

table {
  border-spacing: 0;
  border-top:1px solid #ccc;
}

th.headertext div {
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height:4em;
}

td:nth-child(even), th:nth-child(even) {
    background-color: #efefef;
}

th {
    font-size: 16px;
    font-weight: bold;
    /*height: 100%;*/
    /*line-height: 100%;*/
}

td, th {
    text-align: center;
    border-bottom: solid 1px #ccc;
    font-size: 12px;
    padding: 6px;
    word-wrap: break-word;
}
<table>
  <tr>
    <th class="headertext"><div>left</div></th>
    <th class="headertext"><div>middle</div></th>
    <th class="headertext"><div>right</div></th>
  </tr>
  <tr>
    <td>left</td>
    <td>middle</td>
    <td>right</td>
  </tr>
</table>

Answer №2

Follow these steps to Replace "Image" with Real Images

<html>
<head>
<style>
th:nth-child(2n+1) span {
    background: #E4E4E4;
}
th{
    -webkit-transform: rotate(270deg);
    
height: 50px;

}

td:nth-child(2n+1) {
    background: #E4E4E4;
}
td {
    width: 50px;
    height: 50px;
border-top:solid 1px #acacac;
}
</style>
</head>
<body>

<table cellpadding="0" cellspacing="0">
<tr>
<th><span>Brush</span></th><th><span>Roll</span></th><th><span>Spray</span></th><th><span>Liquid</span></th>
</tr>
<tr>
<td>Actual Image</td><td>Actual Image</td><td>Actual Image</td><td>Actual Image</td>
</tr>
<tr>
<td>Actual Image</td><td>Actual Image</td><td>Actual Image</td><td>Actual Image</td>
</tr>
</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

Html.fromHtml does not strip <!-- comments -->

While parsing HTML code, I want to display it in a simple TextView without using a WebView. The Html.fromHtml(mySource) method works well and styles the text with colors, bold, italic, etc... However, it does not remove comments which is inconvenient. D ...

androidhtmlcomments

Ways to place an image above a link when hovered over

How can I create a rollover effect in my navbar using CSS? I want a light bulb icon to appear above a link when the user hovers over it. .navbar .nav a, .navbar .nav .a { font-size: 16px; } .navbar .nav a:hover, .navbar .nav .a:hover { background- ...

htmlcssimagehyperlinkhover

Customize Your Wordpress Category Title with a Background Image

Within my wordpress template, there is a module known as new_boxs. The code snippet below shows that this module displays on the page six times, with two columns wide and three rows down: foreach($data_cat as $cat){ ?> <div class="span6"> ...

phpcsswordpress

Utilizing Python to manipulate the 'select' tag in HTML

Currently, I am attempting to retrieve events from an HTML page located at In my efforts to choose different areas using python script, I encountered a challenge with the following snippet of HTML code: <select data-ng-options="key as value.name for ( ...

pythonhtmlseleniumweb-scrapingmechanize

Pair items with identical names within an array

I am faced with a task where I need to merge filter elements with equal titles in order to avoid repetition. The goal is to display all inner elements together under one title if they have the same name. For example, if two filters both named FILTER-AB ha ...

javascriptphpjqueryhtmlmagento

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

I'm looking for assistance with a script for my website that dynamically generates a PDF after the user makes selections in one of the frames. The website uses the HTML5 tag to display the PDF file. Can anyone provide guidance on a script that can: ...

javascriptioshtmlpdf

Tips for altering the design of a registration page

I'm struggling to modify my registration page layout so that the avatar is positioned on the left while the username, password input boxes are on the right. I attempted to use split divs without success and also tried adjusting the positioning of the ...

htmlcssformsavatar

Arrange children of varying heights in a line

Wondering if it's feasible to design a flexbox layout with wrapping children while aligning them to the top? .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .container .element { flex: 0 0 auto; } This piece o ...

cssflexbox

Retrieving the most recent HTML bookmark that was clicked

Is there a way to retrieve the most recently clicked html bookmark using javascript/jquery? Here is the html code: <a href="#div1">div1</a> <a href="#div2">div2</a> and the content of DIV1: <div id="div1"> DIV 1 - Lore ...

javascriptjqueryhtml

Communicate through PHP and JavaScript chat to display HTML content in the chat window

I have been attempting to display HTML output in the chat window but instead, it is showing the HTML code. Here are the two files involved in the chat system: chat.js `function chatHeartbeat(){ var itemsfound = 0; if (windowFocus == false) { var ...

javascriptphpjqueryhtmlmysql

Expanding and collapsing a div using jQuery when an image is clicked

I have a query that spans across two areas - CSS styling and JQuery functionality. The primary concern I have is related to my code snippet below. When the user clicks on the circular profile image, ideally, the "profiledrop" div should become visible. ...

javascriptjquerycss

The v-on:click event handler is not functioning as expected in Vue.js

I am currently learning vue.js and facing some challenges. Below is the code snippet from my HTML page: <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net ...

javascripthtmlvue.js

Creating responsive lines with CSS on top of an image

I would like to add lines on an image using CSS3 and HTML5 Canvas. I came across a tutorial and demo that utilizes an html div: However, when attempting this effect on an image, the line appears outside of the image. How can I ensure that the line is dra ...

cssimagelines

Tips for building a CSS grid system with 3 columns and the ability to accommodate an infinite number of items

I am currently working on designing a CSS grid that will consist of 3 columns for placing an unlimited number of "content DIVs" with equal heights, positioned in sequential order like the example below: [1][2][3] [4][5][6] [7][8] Any assistance or guidanc ...

htmlcssgridcss-grid

Can dynamic CSS imports be unloaded in a React application?

I am facing an issue with loading two files using react.lazy and suspense: import React, { Suspense, lazy } from "react"; import { Route, Redirect } from 'react-router-dom'; const MainLayout = lazy(() => import('Components/Layout/MainL ...

javascriptcssreactjs

Is it possible to incorporate HTML templates into other HTML templates?

Imagine a scenario where we have a web application that allows users to schedule appointments. Each appointment follows a standard block-like display template, which is quite simple: <div class="appt"> <div class="title">Encounter strange ...

phphtmltemplatesdry

Looking to retrieve the dynamic "Publish Date" value from a webpage using HtmlUnit in Java?

As part of a coding exercise, I am currently working on a project that involves comparing the current system date with dates on various web pages to determine if there are any new updates. While most of the pages work as expected, there is one particular p ...

javascriptjavahtml

Mastering the correct application of flex properties within nested flex containers

I'm struggling with utilizing flexbox properly and would like some clarification on how nesting parent and child elements functions. I understand that the child elements inherit the parent's flex properties, but I'm unsure if this inheritan ...

htmlcssflexbox

Combine various media queries generated from LESS CSS to create a cohesive group

I was considering incorporating LESS css into my PHP project. Specifically, I wanted to utilize its nested @media query functionality. However, I noticed that it does not group multiple media queries in the resulting CSS output. For instance: // LESS . ...

phpcsslesscss-parsing

Tips for reducing noise on your website during the deployment process

Currently in the process of creating a website and incorporating fonts from Google Webfonts. While these fonts appear sleek and flawless on Google's own site, once implemented onto my own site they seem quite noisy. Any suggestions for how to prevent ...

htmlcss