How do I make th table cells vertical and stretch/shrink to fit content?

Question

In an effort to save screen space I'm trying to transform my table header cells (th) into a single vertical line of text.

I have added .vertical-text {transform: rotate(-90deg); white-space: nowrap;} to the header cells to achieve this but it's having some strange effects.

Problems:

1) The text does not sit directly on top of it's column. It sits off to the side making it hard to tell which header belongs to which column.

2) The height of the header cells does not grow to fit the vertical height of the transformed text, it gets cut off. I need the header row to stretch to accommodate the new height of the text.

3) The width of the columns do not shrink after making the text vertical, they keep the same width as if the text was not vertical. The whole point of making the header cells vertical is to save space but it doesn't resize the column widths when I do that.

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.vertical-text {
  transform: rotate(-90deg);
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  min-width: 100%;
  position: relative;
  margin: 0 -20px;
}

table * {
  position: relative;
}

table td,
table th {
  padding-left: 8px;
}

table thead tr {
  background: #36304a;
}

table tbody tr {
  height: 50px;
}

table tbody tr:last-child {
  border: 0;
}

table td,
table th {
  text-align: left;
}

table td.l,
table th.l {
  text-align: right;
}

table td.c,
table th.c {
  text-align: center;
}

table td.r,
table th.r {
  text-align: center;
}

.header th {
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

tbody tr {
  font-size: 15px;
  color: #808080;
  line-height: 1.2;
  font-weight: unset;
}

tbody tr:hover {
  color: #555555;
  background-color: #f5f5f5;
  cursor: pointer;
}

.column {
  width: 160px;
}

.column:first-child {
  padding-left: 40px;
}

.column:last-child {
  padding-right: 40px;
}


  
    
      
        
        Remove Apps
        Restrict App Access
        Block Tracking
        Disable Ads
        Disable Scheduler
        Backup
        Restore
        Misc
        Last Updated
      
    
    
      
        Some Name Here
        No
        Yes
        Yes
        No
        Yes
        Yes
        No
        No
        Yes
      
      
        Some Name Here
        No
        Yes
        Yes
        No
        Yes
        Yes
        No
        No
        Yes
      
      
        Some Name Here
        No
        Yes
        Yes
        No
        Yes
        Yes
        No
        No
        Yes

How do I make th table cells vertical and stretch/shrink to fit content?

Answers (1)

Related Questions