Search code examples
htmlgridcss-tables

HTML Table with vertically rotated headers on the left side


I'm trying to create a html table to populate with some data that looks like the image below. I'm able to rotate the text with simple css but having trouble figuring out how to organize the sub rows/columns. Is this possible with html/css tables or at least grid?

really ugly table with headers rotated on the side


Solution

  • I was able to solve this b treating each tag as it's own row and building the data on them individually.

        <table>
        <tr>
          <td rowspan="4" class="rotate">Header Text</td>
          <td class="rotate pole">SubHeader Text 1</td>
          <td>
            <ul>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
            </ul>
          </td>
          <td>
            <ul class="no-ul-style">
              <li>6</li>
              <li>6</li>
              <li>6</li>
              <li>6</li>
            </ul>
          </td>
          <td>
            6
          </td>
        </tr>
        <tr>
    
          <td class="rotate pole">SubHeader Text 2</td>
          <td>
            <ul>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
            </ul>
          </td>
          <td>
            <ul class="no-ul-style">
              <li>6</li>
              <li>6</li>
              <li>6</li>
              <li>6</li>
            </ul>
          </td>
          <td>
            6
          </td>
        </tr>
        <tr>
          <td class="rotate pole">SubHeader Text 3</td>
          <td>
            <ul>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
            </ul>
          </td>
          <td>
            <ul class="no-ul-style">
              <li>6</li>
              <li>6</li>
              <li>6</li>
              <li>6</li>
            </ul>
          </td>
          <td>
            6
          </td>
        </tr>
        <tr>
          <td class="rotate pole">SubHeader Text 4</td>
          <td>
            <ul>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
              <li>text text text text text text text text</li>
            </ul>
          </td>
          <td>
            <ul class="no-ul-style">
              <li>6</li>
              <li>6</li>
              <li>6</li>
              <li>6</li>
            </ul>
          </td>
          <td>
            6
          </td>
        </tr>
      </table>