how to set 90 degree word to the most left in the same table?

Question

What I want to do is set the 90 degree word to the most left in table

here is the CSS how to make the word into 90 degree

-moz-transform: rotate(-90.0deg);  /* FF3.5+ */
-o-transform: rotate(-90.0deg);  /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";

Here is the screen which is what I want enter image description here

Here is my table code, but the 90 degree was separate in different , but I want to make this in one table

<div class="row">
    <div class="col-lg-1" >
        <div style="margin-top: 75px;background:#0B2161;width: 204px;padding-top: 6px;padding-bottom: 20px;color:white;font-weight:bold;text-align:center;font-size:20px; -moz-transform: rotate(-90.0deg);  /* FF3.5+ */ -o-transform: rotate(-90.0deg);  /* Opera 10.5 */-webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";"> Longest Unavailable
        </div>
    </div>
    
    <div class="col-lg-5">
    <table class="table table-bordered table-condensed" style="background:black;">
        <tr style="font-weight:bold;text-align:center;font-size:22px;">
            <td style="background:#0B2161;color:white;">Agent</td>
            <td style="background:#0B2161;color:white;">Aux Code</td>
            <td style="background:#0B2161;color:white;">Duration</td>
        </tr>
        <tr style="font-weight:bold;text-align:center;font-size:30px;">
            <td style="color:white;background:red;">234</td>
            <td>2</td>
            <td>00:00:26</td>
        </tr>
            <tr style="font-weight:bold;text-align:center;font-size:30px;">
               <td style="color:white;background:red;">234</td>
                <td>2</td>
               <td>00:00:26</td>
             </tr>
            <tr style="font-weight:bold;text-align:center;font-size:30px;">
              <td style="color:white;background:red;">234</td>
              <td>2</td>
              <td>00:00:26</td>
            </tr>
       </table>
</div><!--/span-->
</div><!--/end row-->

Any idea how to solve it ? thanks

You need `transform` without a prefix for it to work in IE10. — Spudley, Nov 20 '13 at 10:08

Sridhar R · Answer 1 · 2013-11-20T10:09:07.370

0

Try this

<table cellpadding="0" cellspacing="0" align="center">
<tr>
    <td rowspan="3"><div class='rotate'>Longest Unavailable</div></td>
    <td >Agent</td>
    <td >Aux code</td>
    <td>Duration</td>

</tr>
<tr>
    <td>234</td>
    <td>2</td>
    <td>00:00:26</td>

</tr>
<tr>
   <td>234</td>
    <td>2</td>
    <td>00:00:26</td>

</tr>

CSS

rotate {
     -moz-transform: rotate(-90.0deg);  /* FF3.5+ */
       -o-transform: rotate(-90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}

BASCIC DEMO

Based on your code DEMO

edited Nov 20 '13 at 10:09

answered Nov 20 '13 at 09:59

Sridhar R

20,190
6
38
35

when you insert in this text 'Longest Unavailable' the table not looks good – Sridhar R Nov 20 '13 at 10:05
You also need `transform` without a prefix for it to work in IE10. – Spudley Nov 20 '13 at 10:09
hi Sridhar R, how to make the Longest Unavailable word stick together with the table ? – Oscar Nov 20 '13 at 10:12

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

This 2 links should be helpful to you: CSS tricks & Similar question on stackoverflow

edited May 23 '17 at 12:05

Community

1
1

answered Nov 20 '13 at 10:01

Edvin Antonov

21
8

how to set 90 degree word to the most left in the same table?

2 Answers2