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

What is the best way to reset the 'aria-expanded' attribute to 'false' as I navigate to the following element?

My menu has 2 dropdown buttons, each with a default 'aria-expanded'=false value. The buttons also have the 'up' and 'down' classes to indicate when they are expanded or closed. The issue arises when I click on the first button ...

htmljquerywai-aria

Adjusting the color of a specific part of a text within a string using

I am trying to update the color of specific keywords within a post. For example: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor lacinia urna eget gravida. Quisque magna nulla, fermentum fermentum od #keyword1 #keyword2 #keyword3 ...

javascripthtmlcssreactjsnext.js

Troubleshooting Highcharts container selection problem on Nexus 7 running version 4.2.1

Having a problem with Highcharts on my Nexus 7. When I touch the chart, the entire thing gets selected with a blue overlay, but this doesn't happen on other devices like the Nexus 4. Even when I try accessing demos from Highcharts website, the issue ...

javascriptandroidhtmlhighchartscordova

I am having trouble with Node.js not properly handling POST requests and instead throwing a 505 error

I am a newcomer to nodejs and facing a roadblock in completing my project. I have been stuck for almost 2 days trying to resolve an issue with POST requests not being listened to by nodejs. Despite console logging, I keep getting a 405 error page. Here&ap ...

htmlnode.jsexpress

Tips for importing extensions with Rselenium

I could use some assistance in understanding how to activate a chrome extension using RSelenium. The extensions are visible in the browser tabs but are not automatically loaded when working with RSelenium. ...

htmlrgoogle-chromeselenium-webdriverrselenium

Saving user input from a PHP form into a text file

Below is a simple PHP form that performs a calculation when submitted. Now, I want to save the inputs (height, weight) and calculation result to a text file without displaying the path of the file. Ideally, I would like each submission to add a new line in ...

phphtmlforms

Distribute the elements evenly between two separate divs

Hello everyone! I have a unique challenge that I hope someone can help me with. I have a list of links to various tests, but different sections require these links to be displayed in different ways. One section needs them spread over two columns, while an ...

htmlcsslist

Arranging elements on top of a fixed element using JavaScript and CSS

Currently, I am implementing Javascript code that adds a div to the body of pages. The purpose of this div is to always stay at the top of the document or window, regardless of the page's design and content. Everything was functioning correctly until ...

javascriptcss

"Enhance Your Website with Drag-and-Drop Cart Functionality using HTML

Seeking assistance from anyone who has the knowledge. I've searched through similar questions on this platform but haven't been able to resolve my issue. Currently, I'm working on developing a basic shopping cart using HTML5 (Drag and Drop ...

javascripthtml

How to eliminate the space between text and list-style-image in CSS

My ul list items have an image added using the list-style-image property. Here is an example of what I have done: JSFiddle ul { list-style-image: url('http://placehold.it/50x40'); } <ul> <li>Coffee</li&g ...

htmlcss

Modify the color of the div element after an ajax function is executed

My original concept involves choosing dates from a calendar, sending those selected dates through ajax, and then displaying only the chosen dates on the calendar as holidays. I aim to highlight these selected dates in a different color by querying the data ...

javascriptjqueryhtmlcssajax

Understanding the hierarchy of LESS css class structure is crucial for

In my chat contact list, each contact can have a different state represented by classes: .online .offline .online .selected .offline .selected Here are the corresponding styles (example): .online { background-color: #fff; p { color: #000; } } . ...

cssless

Adjustable width for flexbox column

Is there a way to adjust the width of the first flex column so that it only takes up the space of its content? .flex { display: flex; } .inside { flex: 1; border: 1px solid #000; } <div class="flex"> <div class="inside inside-left"& ...

cssflexbox

Display WordPress post content within a specific div element

My Wordpress site has a unique homepage design featuring a div on the left showcasing the titles of the five most recent posts. Adjacent to that is an empty div on the right with a scroll bar. I am in search of a solution whereby clicking on any post tit ...

jqueryajaxwordpresshtml

Utilize CSS properties to pass as arguments to a JavaScript function

Is there a way for me to make my CSS animation functions more efficient? I have similar functions for different properties like height, width, and left. Can I modify the function below to accept a CSS property argument instead of hardcoding height? Window ...

javascriptcss

Is there a way to enhance the height of Bootstrap combobox items? Can this be achieved?

Is it possible to improve the height of Bootstrap combobox item? How can I achieve that? 1 2 3 4 ...

jqueryhtmlcss

How to achieve a seamless iframe effect using CSS

With the introduction of new HTML5 iframe attributes, there are now more options available. One such attribute is the seamless attribute, which has the ability to: Create an iframe that appears to be seamlessly integrated into the containing document. ...

javascriptjquerycssiframe

Enrollment in the course is conditional on two words being a perfect match

I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align. That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the clas ...

javascriptjquerycssmatch

Refreshing Django HTML table dynamically upon database updates

Currently, I have an HTML table set up using a Django template to showcase data from my database. I am looking to ensure that this table remains updated in real-time whenever the database undergoes changes. Despite my research efforts, there is limited inf ...

htmlajaxdjangodatabaseweb-applications

Manipulating the DOM results in the SWF being reloaded

Currently, I am utilizing jQuery to insert an SWF into the DOM. However, when the SWF loads and I attempt to clone or wrap it, the SWF ends up reloading. Preventing this reload is crucial for me. Here's an example: $('#test9').before(&apo ...

javascriptjqueryhtmldomflash