0

I'm trying to make vertical text at table column header. I've made it, Now, I want to make the vertical-text's column much more thinner as those columns contain numbers only. For that reason, I tried to decrease that column(th)'s width, but, it didn't work! How can I fix this?

Fiddle Link

Some Css:

table.myTable th.rotate-container {
    height: 80px;
    width: 30px;
    text-align: left;
    padding: 5px 5px;
}
table.myTable th.rotate-container > div {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

    width: 80px;
}
user1896653
  • 3,247
  • 14
  • 49
  • 93
  • 2
    Sort of a nasty fix, tempted to search around to find a better one, you could add something like `margin:0 -25px;` http://jsfiddle.net/G3wXm/2/ – SubjectCurio Jun 18 '14 at 15:36
  • @user1896653 well, I have to say that it's really good if you know how to use it. Instead of setting the `width` for the column, you can just change the negative margin and the width of the inner div. However the `width` of the column should be set at some fixed minimum value (`1px` is the best). Then you adjust the negative margin and the width of the inner div. You have the inner div's width `80px`, the negative margin (left and right) is `-25px`, so you have the actual width as `80 - 25 * 2 = 30px`, so if you want to change the col width to 50px, just set `-15px` for negative margin. – King King Jun 18 '14 at 16:11

0 Answers0