3

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?

gummbahla
  • 219
  • 2
  • 13
I'll-Be-Back
  • 10,530
  • 37
  • 110
  • 213
  • Possible duplicate: http://stackoverflow.com/questions/15806925/how-to-rotate-text-left-90-degree-and-cell-size-is-adjusted-according-to-text-in – gummbahla Nov 12 '15 at 09:15
  • Is there a reason why you are rotating by -180 and applying the writing mode, instead of rotating by -90? By using `transform-origin: top left; transform: rotate(-90deg);` at least the text stays inside the box. Making the box fit perfectly is, as far as I know, not possible without using JS. – gummbahla Nov 12 '15 at 10:10
  • @gummbahla Ah I see. What I need to do in JS in this situation? – I'll-Be-Back Nov 12 '15 at 10:35
  • @I'll-Be-Back could this solve your problem http://jsfiddle.net/1mmh7510/8/ please let me know thanks – GibboK Nov 12 '15 at 12:04
  • @GibboK No, you included fixed width. That would not help because each field would have different length of content, like that http://jsfiddle.net/1mmh7510/9/ - having auto width would be best option. – I'll-Be-Back Nov 12 '15 at 12:21
  • http://jsfiddle.net/1mmh7510/10/ – Raviteja Nov 12 '15 at 12:35
  • @Raviteja No, you included fixed width. – I'll-Be-Back Nov 12 '15 at 12:51

1 Answers1

1

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());
gummbahla
  • 219
  • 2
  • 13
  • Kinda working but not perfect. I set the height 300px by default. However the width should expanded a bit more to fill all the content in the box properly. Eg: http://jsfiddle.net/praz92ss/5/ – I'll-Be-Back Nov 12 '15 at 13:33
  • Sorry, I forgot to include the `max-width` part in the example. Should be fixed now. – gummbahla Nov 12 '15 at 13:38
  • Almost :) If I add more field with bigger content, it dont work: http://jsfiddle.net/praz92ss/7/ – I'll-Be-Back Nov 12 '15 at 13:40
  • That is because the width of the last column is determined by the height of the text in the pre-last column. You would have to give the cells and contents different id's or classes to circumvent this problem. See http://jsfiddle.net/phtgx0ht/ – gummbahla Nov 12 '15 at 13:45