CODEWITHSUNDEEP
javascriptjquerycss
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

Rotated content overlapping the cell border

How to prevent the content overlapping the cell border, so the content stay in the cell. I would prefer not to set fixed width because the length of content could be vary.

See example: http://jsfiddle.net/1mmh7510/5/

CSS

 .rotate {
    height: 400px;

}

.rotate > div {
    -webkit-writing-mode:vertical-rl; 
    -ms-writing-mode:tb-rl; 
    writing-mode:vertical-rl; 
  transform: rotate(-180deg);
}

HTML

<table style="background-color:#e4e6ea;" border="0" cellspacing="1">
    <tbody>
    <tr class="tableheader-row-dashboard">
        <td style="background-color:white;"width="90px"> Date</td>      
        <td style="background-color:white" width="90px">Phone No</td>
        <td style="background-color:white; vertical-align: bottom;" class="rotate" width="20px"><div>Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div></td>
    </tr>
    <tr class="tablerow-rowd">
        <td class="text">06/11/2015</td>
        <td class="text">1234567890</td>
        <td class="text">X</td>
    </tr>
    </tbody>
</table>

Edit:

It looks like it is not possible with CSS. Using jQuery how to get a width of the content it will then set fixed width of td?

Upvotes: 3

Views: 842

Answers (1)

gummbahla
gummbahla

Reputation: 219

With combination of JS (jQuery) and CSS it's possible to achieve what you want, though it's not very pretty: http://jsfiddle.net/praz92ss/6/

HTML:

<table style="background-color:#e4e6ea;" border="0" cellspacing="1">
    <tbody>
    <tr class="tableheader-row-dashboard">
        <td style="background-color:white;"width="90px"> Date</td>      
        <td style="background-color:white" width="90px">Phone No</td>
        <td style="background-color:white;vertical-align:bottom" class="rotate"><div class="content">Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div></td>
    </tr>
    <tr class="tablerow-rowd">
        <td class="text">06/11/2015</td>
        <td class="text">1234567890</td>
        <td class="text">X</td>
    </tr>
    </tbody>
</table>

Essentially, you need to do three things:

1. Rotate the text with CSS

.rotate > div {
  //Initially, ensure that the text will not get wider than 
  //the height of our container
  max-width:400px; 

  //Do transformation around top left corner
  transform-origin: top left;
  transform: rotate(-90deg);    
}

2. Fix the widths and heights with JS

$(document).ready(function() {
  //Fix width of container (table-cell)
  $('.rotate').css('max-width', $('.content').width());

  //Fix width and height of content
  $('.content').css('width', $('.content').width());
  $('.content').css('height', $('.rotate').width()); 
});

3. Reposition the rotated text to the correct position within its container

  $('.content').css('margin-bottom', -$('.rotate').width());

Upvotes: 1

Related Questions