Combining Cells in HTML Tables

Currently, I am attempting to create a table using HTML, but I have encountered a problem that I am unsure how to solve:

Is there a way to convert a cell located below or next to another cell that contains lengthy vertical text into a smaller square format without affecting the long vertical text in the cell above?

Below is the HTML code snippet:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Marge Cells</title>
<link rel="stylesheet" type="text/css" href="dudas.css">
</head>
<body>
<table border="1px">

    <tr>
        <td>
       </td>
       <td class="Rotate-90">
       corto
       </td>
       <td class="Rotate-90">
        text&nbsp;muuuuy&nbsp;largo
       </td>
   </tr>
   <tr>
        <td>
        Cuentas
       </td>
       <td>
        11.2€
       </td>
       <td>
        1€
       </td>
   </tr>
</table>
</body>
</html>

And here is the corresponding CSS:

@charset "UTF-8";

.Rotate-90
{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  position:relative;
  height: 15px;
  width: 30 px;
}

table {
border-collapse: collapse;
}

Below is a visualization of the desired outcome:

htmlcsscells

Answer №1

--- unique ---

After careful consideration, I have grasped your concept.

.table-r {
  border-collapse: collapse;
}
.table-r td {
  width: 30px;
}
..table-r th {
  padding: 5px 10px;
}
.table-r td {
  text-align: center;
  padding: 10px 5px;
  border: 1px solid #ccc;
}
.table-r th.th-r {
  height: 140px;
  white-space: nowrap;
}
.table-r th.th-r > div {
  transform: translate(25px, 51px) rotate(315deg);
  width: 30px;
}
.table-r th.th-r > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}
.table-header-rotated th.row-header {
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}
<table class="table-r">
  <thead>
    <tr>
      <th class="th-r">
        <div><span>Header 1</span>

        </div>
      </th>
      <th class="th-r">
        <div><span>Header 2</span>

        </div>
      </th>
      <th class="th-r">
        <div><span>Header 3</span>

        </div>
      </th>
      <th class="th-r">
        <div><span>Header 4</span>

        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>14</td>
      <td>15</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

--- old --- Is this what you mean ?

.Rotate-90 {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  position: relative;
  height: 15px;
  width: 30 px;
}
table {
  border-collapse: collapse;
}
<table>
  <tr>
    <th rowspan="4" class="Rotate-90">text vertical</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
  <tr>
    <td>4</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
</table>

You have rowspan and colspan.

colspan does this:

+-------------------+
| 1                 |
+-------------------+
| 3  | 4  | 7  | 8  |
+----+----+----+----+
| 9  | 10 | 11 | 12 |
+----+----+----+----+
| 13 | 14 | 15 | 16 |
+----+----+----+----+

rowspan does this: 

+----+----+----+----+
| 1  | 2  | 3  | 4  |
+    +----+----+----+
|    | 4  | 7  | 8  |
+    +----+----+----+
|    | 10 | 11 | 12 |
+    +----+----+----+
|    | 14 | 15 | 16 |
+----+----+----+----+

Rowspan and Colspan combined:

+---------+----+----+
| 1       | 3  | 4  |
+         +----+----+
|         | 7  | 8  |
+---------+----+----+
| 9  | 10 | 11 | 12 |
+----+----+----+----+
| 13 | 14 | 15 |    |
+----+----+----+----+

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

filtering out specific sections of HTML using xPath

I am currently attempting to scrape information from this page My approach involves using xPath to select specific elements. Here is a snippet of my code: $safeFlag = true ; //*[@id="tabset_productPage"]/dd[1]/div/div //HAVE TRIED THIS TOO //*[@id="tab ...

phphtmldomxpath

What is the best way to capture a form submission when there are no errors?

My form includes a validation check for valid fields upon submission. Here is an example of how it is structured: <form class="form-horizontal" method="post" action="#" name="basic_validate" id="basic_validate" /> <div class="con ...

phpjavascriptjqueryhtml

Bootstrap's ability to display panels of equal height across multiple rows is a game

Just started using Bootstrap 4 after being familiar with Foundation for years. In Foundation, equalizer was a tool to ensure divs had the same height, which would be applied to all divs within a container. I understand that Bootstrap uses Flex, but I&apos ...

csstwitter-bootstrapflexbox

Dealing with customized protocol responses in JavaScript

My web server is set up to return a response like: HTTP/1.1 302 Found message://ActualMessage While this setup works seamlessly for UI clients like Android and iOS, I'm faced with the challenge of handling this case on a web browser. For instance, ...

javascripthtml

Aligning characters according to Unicode standards

I'm looking to showcase a Unicode character at the center of a button. Below is the code snippet: <div class="col-xs-1"> <button class="btn btn-tool"> <span></span> </button> </div> span:before { ...

htmlcssunicode

Tips for updating the id of a tag using JavaScript?

Html Code:- {% for post in posts %} <article class="media content-section"> <div class="media-body"> <h2><a id="post_title" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}&l ...

javascripthtmldjango

Click on a div to switch between displaying an arrow pointing to the right and an arrow

Currently working on a design for an accordion-style layout and looking to implement toggling arrow icons when the div is clicked. I have managed to toggle the content of the div successfully, but now seeking assistance in achieving the same functionality ...

javascriptjqueryhtmlcss

Angular2 - Incorporating a New Attribute

I am working with the following Angular2 code: <ngx-datatable-column prop="id" name="ID"> <template ngx-datatable-cell-template let-row="row" let-value="value"> <a [routerLink]="['/devicedtls',r ...

cssangular

Tab button that can be easily printed

I'm currently facing a challenge with my HTML code on my website. I have 5 tabs already set up, but I want to add one that redirects users to a printable page that opens the print menu specific to their browser. It seems like there might be an issue i ...

htmlcssprintingtabsuser-controls

Master the art of directing your attention to a list element with ease using the tab function and jQuery

I've been tasked with creating a questionnaire for a client. They want the current active question to be displayed at 100% opacity, while the inactive questions should be at 20% opacity. Currently, when the page loads, all questions are dimmed to 20% ...

javascriptjqueryhtmlcss

Customizing Each Menu Item in WordPress

I am currently working on customizing my WordPress Menu. My goal is to assign a unique color to each menu item, while ensuring that the background color of child elements within pages and posts matches the parent text color. Specifically, I envision the f ...

csswordpressmenu

What is the best way to change the date format of a JSON string to a custom format?

Hello, I am seeking advice on how to convert a JSON string date from a response into the format of "8/24/2016". I attempted to use a dateFilter.js file, but encountered errors. Here is my attempted code: Below is the dateFilter.js code that resulted in an ...

javascripthtmlangularjsjsonng-filter

Ways to trigger a click event on a dynamically added class utilizing $(this);

I am attempting to retrieve the text when clicking on dynamically appended HTML elements. After some research, I came across the following code snippet: $(document).on('click', '.myClass', function (). However, it seems to work only f ...

jqueryhtml

Tips for creating a horizontally scrolling div

Here is the CSS for the div that needs to be able to scroll horizontally: .form-holder{ padding-left: 20px; width: auto; background: ; overflow-x: auto; max-height: 300px; padding-bottom: 30px; } Every ...

jquerycss

How do I eliminate excess space following the resizing of the Material UI Drawer component?

I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this rema ...

cssreactjsmaterial-uinavigation-drawerwhitespace

Unable to supersede the current CSS styling

I have implemented the example found here in my project and now I am trying to make the table stretch to fit the entire page. To achieve this, I have added the following CSS: html, body{ height: 100%; } #gridContainer { height: 100%; } table{ ...

htmlcss

Display item upon hovering and for an extended period upon clicking using jQuery

I am looking to create a functionality where hovering over an area displays item 2 for a certain duration, which is currently working fine with the existing code. However, I also want it to remain visible for a longer period if clicked, but this does not ...

jqueryhtmljquery-hover

Retrieving information from the table based on the user currently logged in

I have a scenario with two different tables, NGO and Volunteer. When a volunteer selects an NGO to work with, I want to display only those volunteers who are interested in the current logged-in NGO. Below is the code snippet I am using: [<?php ...

phphtmlcssmysqlmaterialize

What is the best way to contain the CSS for dynamically generated HTML within a div element without impacting other elements on the page?

I am currently facing a challenge where users can input any HTML into a text box, and I need to manipulate that HTML by identifying elements such as anchor tags or divs. To achieve this, I have created a hidden div and copied the pasted HTML into it using ...

javascriptjqueryhtmlcss

Troubleshooting Challenges in JavaScript/jQuery Hangman Game

Having trouble with my hangman game's game loop. Attempting to replace correct letters as the game runs through the word, but it's currently: looping through the word checking if the guessed letter is in the word returns index[0] Tried splitti ...

javascriptjqueryhtmlloops