CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nutic
Nutic

Reputation: 1437

Table header text transform

I have used transform: rotate(270deg) for table header, but since names in that header are not equal ( not even close) it looks ugly, so I have to make every column equal width. Some text in table header is made with 2 or 3 words, some are single word.

Here it is how it looks like: http://img571.imageshack.us/img571/9527/tbl.png

All I want, is that every column has same width, no matter how long name in header is, and name put to be in 2 rows max.

Edit: Example:

http://jsfiddle.net/SvAk8/

.header {


-webkit-transform: rotate(270deg);  
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(27deg);
transform: rotate(270deg); 
white-space: pre-line; 
width: 50px;
height: 180px; /* to be adjusted: column is not always tall enough for text */
margin: 0 -80px;
vertical-align: middle;

}

Upvotes: 5

Views: 1296

Answers (3)

cacoroto
cacoroto

Reputation: 279

That is the best what I got so far:

$(document).ready(function () {

  (function () {
    var maxW = 0,
      maxH = 0;

    $("td.header").each(function () {

      $cell = $(this);

      $dummyDiv = $("<div></div>", {
        text: $cell.text()
      });

      // Replaces the original text for a DummyDiv to figureout the cell size before the rotation
      $cell.html($dummyDiv);

      if ($cell.width() > maxW) maxW = $cell.width();
      if ($cell.height() > maxH) maxH = $cell.height();
    });

    $("td.header").each(function () {
      // Applies the rotation and then the size previosly calculated
      $(this)
        .addClass("rotate")
        .width(maxH + 10)
        .height(maxW + 10);
    });
  })();
});

You can see a live demo here: http://jsfiddle.net/Lrr3G/

I hope that can help :)

Upvotes: 1

KatieK
KatieK

Reputation: 13853

Add this specification:

table { width: 100%; table-layout: fixed; }

table-layout: fixed; does this:

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

and requires a specified width. See https://developer.mozilla.org/en-US/docs/CSS/table-layout for more.

Upvotes: 3

Lupus
Lupus

Reputation: 1518

OK! I made a reserch and it seems that browsers won't calculate dimansions after transform.

Rotate Text as Headers in a table (cross browser)

I think you got only one option and its: javascript;

find yourself a good line height and after page load resize the width.

Upvotes: -1

Related Questions