Here's a unique version: "Create a table with a two-layered structure by placing the x-axis data at the top of the table and rotating all text horizontally to be vertical."

Question

Here's a unique version: "Create a table with a two-layered structure by placing the x-axis data at the top of the table and rotating all text horizontally to be vertical."

My goal is to design my table similar to the screenshot provided in the link below:

https://i.sstatic.net/DfcW2.png

Currently, my table looks like this:

https://i.sstatic.net/DgoHS.png

The first column of my table represents issuetype\assignee. The issuetype is on the y-axis and the assignee is on the x-axis. I want to switch it so that all assignee names are placed instead of Type 1, Type 2, Type 3, etc., and all issue types replace Assignee 1, Assignee 2, etc.

Some example IssueTypes in my table include Subtask - create IR, change of address, etc.

Assignees: aziah.purwitasar, etc.

I am struggling to achieve this format using Twitter Bootstrap. If it's not possible with Bootstrap, plain HTML + CSS would also work for me.

Could someone help me design this structure? A fiddle demo demonstrating the solution would be greatly appreciated.

Although the initial assistance was helpful, there seems to be a border problem in Chrome.

Firefox displays the table exactly as intended.

https://i.sstatic.net/THeQJ.png

In Chrome, you can see that the border extends into the issueType column even though we have set rowspan=2 to prevent this. What could be causing this issue?

javascript html css

Answer 1

Answer №1

Take a look at this code snippet, it could be useful for you:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: center;    
}

<table style="width:100%">
  <tr>
    <th rowspan="2">Assigne</th>
    <th colspan="5">Issue Type</th>
  </tr>
  <tr>
    <td>Type1</td>
    <td>Type2</td>
    <td>Type3</td>
    <td>Type4</td>
    <td>Type5</td>
  </tr>
  <tr>
    <td>Assigne1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Assigne2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Assigne3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 2

Take a look at this code snippet, it could be useful for you:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: center;    
}

<table style="width:100%">
  <tr>
    <th rowspan="2">Assigne</th>
    <th colspan="5">Issue Type</th>
  </tr>
  <tr>
    <td>Type1</td>
    <td>Type2</td>
    <td>Type3</td>
    <td>Type4</td>
    <td>Type5</td>
  </tr>
  <tr>
    <td>Assigne1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Assigne2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Assigne3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Here's a unique version: "Create a table with a two-layered structure by placing the x-axis data at the top of the table and rotating all text horizontally to be vertical."

Answer №1

Similar questions

What could be causing the undefined status of this length function?

The attempt to access 'reading params' is resulting in an error due to undefined properties

What is the best way to align an inline list in the center so that it is responsive across all

Can HTML5 be used to interact with a WebApi REST service?

If the href attribute is set to "#" or the target attribute is set to "_blank", then the <a> request cannot be prevented

In Django, the Ajax function will fail to execute if any of the required input fields are left empty

How can we initiate the AJAX request right away while also making sure the page is fully loaded before adding

Encountered an error while trying to click the cookie button using Selenium: "object[] does not have a size or

I am having trouble getting my console.log function to work properly on my HTML page

Step-by-step guide on achieving 100% height for a child element within a parent using Flexbox

Does HTML have a panel feature available?

How to manipulate wrapping behavior in flexbox

Tips for rendering a component upon the page loading in reactjs

Displaying information from a database in HTML dropdown menus and tables

Focus on an element in ThreeJS

Using React to pass a state value as a parameter in a method

Determine the hexadecimal color value by combining two different colors along with a specified percentage/position

Removing exclamation points from the routing of a state URL is a key aspect of mastering full stack development

Enhance the annotation of JS types for arguments with default values

Errors are being thrown by 'npm run serve' due to the absence of FilterService