CODEWITHSUNDEEP
htmlcss
Ashis Biswas
Ashis Biswas

Reputation: 767

Table column rotated but how to position the rotated cell.

Here is a simple table. I want table column to rotate. That's why I have added a class text-flip. It will rotate the column data. But I want to change Cell 1, Cell 2 width based on column data width (after rotate). Like thebelow picture-

enter image description here

Here column data size may be change.

body{
  padding-top: 50px;
}
.text-flip{
  transform: rotate(-90deg);
}
<table border="1">
  <tbody>
    <tr>
        <td class="text-flip">Column Data 1</td>
        <td class="text-flip">Column Data 2</td>
        <td class="text-flip">Column Data 3</td>
        <td class="text-flip">Column Data 4</td>
        <td class="text-flip">Column Data 5</td>                           </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 55

Answers (3)

Steven Lambert
Steven Lambert

Reputation: 5891

You can do it by combining writing-mode with a rotation to achieve vertical text. You'll also need to add the class to a div instead of the td.

Edge will treat the height of the div as though it was 100% width, making it take up the full height of the table, so we can add display: inline-block to make it only take up as much space as needed.

body{
  padding-top: 50px;
}

.text-flip{
  display: inline-block;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  white-space: nowrap;
  padding: 10px
}
<table border="1">
  <tbody>
    <tr>
      <td ><div class="text-flip">Column Data 1</div></td>
      <td><div class="text-flip">Column Data 2</div></td>
      <td><div class="text-flip">Column Data 3</div></td>
      <td><div class="text-flip">Column Data 4</div></td>
      <td><div class="text-flip">Column Data 5</div></td>     </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Jagjeet Singh
Jagjeet Singh

Reputation: 1572

You can do like this :-

body{
  padding-top: 50px;
}
.text-flip {
  white-space: nowrap;
  height: 120px;
  vertical-align: bottom;
}
.text-flip > div {
  transform: rotate(-90deg);
  width: 30px;
}
.text-flip > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}
<table border="1">
  <tbody>
    <tr>
        <td class="text-flip"><div><span>Column Data 1</span></div></td>
        <td class="text-flip"><div><span>Column Data 2</span></div></td>
        <td class="text-flip"><div><span>Column Data 3</span></div></td>
        <td class="text-flip"><div><span>Column Data 4</span></div></td>
        <td class="text-flip"><div><span>Column Data 5</span></div></td>
        </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

bitstarr
bitstarr

Reputation: 374

You could use writing-mode if you can spare IE/Edge and Safari

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

body{
  padding-top: 50px;
}
.text-flip{
  writing-mode: vertical-lr;
}
<table border="1">
  <tbody>
    <tr>
        <td class="text-flip">Column Data 1</td>
        <td class="text-flip">Column Data 2</td>
        <td class="text-flip">Column Data 3</td>
        <td class="text-flip">Column Data 4</td>
        <td class="text-flip">Column Data 5</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions