Creating a visually appealing table in HTML or experimenting with a tableless design can greatly enhance your website's layout

Presenting data with headers in HTML has been a challenge for me. Below is the portion of the header I'm having difficulty with.

Although I've successfully rotated the text, the issue I'm facing now is text overlap.

Here's the code structure:

<style type="text/css"> .text-rotation {
            -webkit-transform: rotate(90deg); 
            -moz-transform: rotate(90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
            height:inherit;
            }
</style>
</head>

<body>
<table width="100%" border="1" align="center" cellpadding="3" cellspacing="1">
  <tr>
    <td rowspan="5">&nbsp;</td>
    <td rowspan="5" align="center" valign="bottom">Code</td>
    <td rowspan="5" align="center" valign="bottom">Change</td>
    <td rowspan="5" align="center" valign="bottom">Description</td>
    <td colspan="6" align="center" bgcolor="#FF6666">STOCK RANGE</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    ...
htmlcss

Answer №1

A simple draft:

    <table border="1">
    <tr>
        <td colspan="6">STOCK RANGE</td>
        <td colspan="11">LENS PROPERTIES</td>        
    </tr>
    <tr>
        <td colspan ="2">SPHERICAL</td>
        <td colspan ="2">SPH/CYL</td>
        <td colspan ="2">SPH/CYL</td>
        <td rowspan="2">Stock</td>
        <td rowspan="2">Disclaimer</td>
        <td rowspan="2">Index</td>
        <td rowspan="2">UV Coating</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
        <td rowspan="2">FOOBAR</td>
    </tr>
    <tr>
        <td>LEFT1</td>
        <td>LEFT2</td>
        <td>LEFT3</td>
        <td>LEFT4</td>
        <td>LEFT4</td>
        <td>LEFT5</td>
    </tr>
    <tr>
        <td>DATA_LEFT_1</td>
        <td>DATA_LEFT_2</td>
        <td>DATA_LEFT_3</td>
        <td>DATA_LEFT_4</td>
        <td>DATA_LEFT_5</td>
        <td>DATA_LEFT_6</td>
        <td>DATA_RIGHT_1</td>
        <td>DATA_RIGHT_2</td>
        <td>DATA_RIGHT_3</td>
        <td>DATA_RIGHT_4</td>
        <td>DATA_RIGHT_5</td>
        <td>DATA_RIGHT_6</td>
        <td>DATA_RIGHT_7</td>
        <td>DATA_RIGHT_8</td>
        <td>DATA_RIGHT_9</td>
        <td>DATA_RIGHT_10</td>
        <td>DATA_RIGHT_11</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

UPDATE 2: A visual representation can be seen here: jsFiddle

UPDATE 3: Additional visuals including the other response can be viewed here: jsFiddle.

Answer №2

When rotating an element in non-legacy IE, the properties of the item are calculated before the rotation takes place. This can cause the entire item and background to shift outside of the document flow, which may not be the desired outcome, especially within a table. To avoid this issue, consider rotating the content inside the cell rather than the cell itself. Here is an example:

.text-rotation > * {
        -webkit-transform: rotate(90deg); 
        -moz-transform: rotate(90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
        height:inherit;
}

... and make sure to wrap the cell content with a generic display:block wrapper like so:

<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation"><div>MINUS</div></td>
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation"><div>MINUS</div></td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation"><div>MINUS</div></td>

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

Eliminating Redundant CSS Code Using PHP Storm

After upgrading to PHP Storm version 8.03, I came across an article that discussed the ability to search for duplicate CSS code using this link: . Although I have tried to find a way to automatically resolve these duplicate codes within PHP Storm, I have ...

phpcssformattingphpstorm

Storing geographic locations in a variable by inputting an address

Currently, I am working on a feature that allows users to input a location and then convert it into longitude and latitude coordinates. These coordinates will be stored in a variable called latlng instead of using preset coordinates. Right now, I have a fu ...

javascriptjqueryhtmlforms

Tips for positioning and resizing an HTML slide

Once again I am faced with my favorite HTML/CSS dilemma and am feeling frustrated. Seeking advice from the experts on SO this time around to solve my problem. Here it is... Imagine you want to create a slideshow in a browser. The requirements are simple: ...

htmlcss

creating a stunning video background that spans 200 viewport heights

My goal is to incorporate a background video for VH1 and VH2 that remains fixed but stops at VH3. When a user opens the page, they will see #VH1 and the #videoBG as a background video. As they continue scrolling, they will reach #VH2 without the backgrou ...

htmlcss

Is it possible to enlarge the window screen using css?

After using zoom at 90%, everything was working fine until we introduced high charts. The hovering property doesn't display in the correct position. Looking for a solution to show a zoomed window on a small screen, like a laptop screen. Does anyone h ...

htmljquerycss

Experience the smooth CSS3 transition effects on iOS devices such as iPhones and iPads. Elevate the appearance of DOM objects with

I have a basic image contained within a div tag. I use JavaScript to add a transition effect to the div element: <div style="transition: opacity 0.8s linear; opacity: 0.5;"><img src="..." /></div> At the end of the transition duration ...

iosipadcsscss-transitionsmobile-webkit

Is there a way to customize the scrollbar color based on the user's preference?

Instead of hardcoding the scrollbar color to red, I want to change it based on a color variable provided by the user. I believe there are two possible solutions to this issue: Is it possible to assign a variable to line 15 instead of a specific color lik ...

htmlcsstypescriptvue.jssass

Instructions on how to toggle the visibility of a div when hovering over a different a tag

To keep things simple, I'm looking to create a visibility toggle effect on a div when someone hovers over an anchor tag. Similar to the behavior of the four buttons on this example link: The issue I'm facing is that I want the div to appear or b ...

javascriptjqueryhtmlcssjquery-ui

Looking for assistance with CSS to properly align a dozen items

UPDATE: See the current layout in this JFiddle based on feedback received from others, still a few tweaks needed. In my setup, there are 12 divs housed within one container div. These 12 divs consist of 6 text components and 6 corresponding input fields. ...

cssformat

Issues have arisen in IE8 with the background gradient on hover elements in the menu, while it functions properly in all other web browsers

Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...

internet-explorercss

Modify the HTML within my web browser view

Is there a way for me to dynamically change the .html content in my webView based on what is currently displayed? I am looking to implement functionality similar to that of a modalViewController but for manipulating .html files. Any suggestions or method ...

iphonehtmlwebviewmodal-dialog

Is there a way to prevent the text in my text boxes from staying there when I refresh the page?

Currently working on an HTML5 project with Javascript, here is a snippet of my code: Your inquiry <textarea type="text" name="phrase" id="phrase" cols="50" rows="5" placeholder="Write your text here. . ."></textarea> I am looking for a way ...

javascripthtmltextarea

Dim the background for all elements except for one

Seeking a way to create a dimmed-background effect by adjusting the opacity of all elements on the page except for one specific element. I've experimented with using the :not() selector as well as jQuery selectors to exclude certain elements, but have ...

javascriptjquerycsssasscompass-sass

Issue with Unslider functionality when using navigation buttons

I've implemented the OpenSource "unslider" to create sliding images with navigation buttons, but I'm facing an issue with the code provided on http:www.unslider.com regarding "Adding previous/next lines." Here are the CSS rules and HTML tags I h ...

javascriptjqueryhtml

"Discovering a button press using the Gamepad API: A Step-by-Step Guide

I'm currently building a web page that can detect button presses on an Xbox controller and display a boolean value based on the pressed button. Right now, I have successfully managed to detect when a controller is connected and show it as a string. Ho ...

javascripthtmlgamepad-api

Creating a typewriter animation using Tailwind CSS and Next.js

I am currently working on implementing a typewriter effect that is almost exactly how I want it. However, I am facing an issue with the printing process. Right now, each word gets printed on a new line and falls into place when done printing. What I actual ...

cssnext.js

Exploring WordPress's Query Page with Posts

My current code successfully pulls posts from a specified category, but I am struggling to also include pages in the output. I have tried various methods, but haven't been able to pull in both posts and pages at the same time. HTML/PHP <?php quer ...

phphtmlwordpress

Tips for handling numerous buttons in ionic?

I'm currently working on an app that includes surveys. In this app, users are required to answer by selecting either the Yes or No button. The desired behavior is for the chosen button to turn blue once clicked, while the other button should maintain ...

htmlcssangularionic-framework

Use Javascript or Jquery to dynamically change the background color of cells in HTML tables based on their numerical

I am working with a collection of HTML tables that contain numbers presented in a specific style: <table border="1"> <tr> <th>Day</th> <th>Time</th> <th>A</th> <th>B</th> &l ...

javascriptjquerycsshtml-table

Adjust the color of text as you scroll

Could you provide guidance on changing the color of fixed texts in specific sections of my portfolio website? Unfortunately, I can't share my lengthy code here, but would greatly appreciate it if you could illustrate with examples. Here's a refer ...

javascripthtmlcss