CODEWITHSUNDEEP
csshtml-tablevertical-text
Jawaid
Jawaid

Reputation: 109

Auto expand TD according to contained DIV

I have a 3x3 html table. In the second row the first and third column contain div's that are rotated to show content vertically. Other cells show content normally. These vertical divs overflow from TD height. I want to expand TD height dynamically based on Div height(width vertically).

Here is the code from fiddle

UPDATED

HTML

<table>

  <tr>
    <td>
      <div>
        ?
      </div>
    </td>
    <td>
      <div>
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
    <td>
      <div>
        ?
      </div>
    </td>
  </tr>

  <tr>
    <td class="expand">
      <div class="vertical">
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
    <td>
      <div>
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
    <td class="expand">
      <div class="hw vertical">
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
  </tr>

  <tr>
    <td>
      <div>
        ?
      </div>
    </td>
    <td>
      <div>
        <input placeholder="some text">
        <button>X</button>
      </div>
    </td>
    <td>
      <div>
        ?
      </div>
    </td>
  </tr>

</table>

CSS

table td {
  border: 2px solid lightgray;
}

.hw {
  width: 208px !important;
  height: 20px;
}

.expand {
  white-space: pre;
}

.vertical {
  /* writing-mode: vertical-rl; */
  transform: rotate(90deg);
}

Thanks in advance.

Upvotes: 0

Views: 2034

Answers (2)

AG_
AG_

Reputation: 2689

Use white-space: pre; in td.

edits

check this updated snippet. I used 'writing-mode: tb-rl' to make text vertical.

Check Can I Use for broswer support 

table td {
  border: 2px solid lightgray;
  white-space:nowrap

  }
.vertical {
  writing-mode: tb-rl;  
}
<table>

<tr>
  <td>
    <div>
      ?
    </div>
  </td>
  <td>
    <div>
      lorem ipsum
    </div>
  </td>
  <td>
    <div>
      ?
    </div>
  </td>
</tr>

<tr>
  <td>
    <div class="vertical" >
      vertical text  
    </div>
  </td>
  <td>
    <div>
    lorem ipsum
    </div>
  </td>
  <td>
    <div class="vertical">
    vertical text
    </div>
  </td>
</tr>

<tr>
  <td>
    <div>
      ?
    </div>
  </td>
  <td>
    <div>
      lorem ipsum
    </div>
  </td>
  <td>
    <div>
      ?
    </div>
  </td>
</tr>

</table>

Upvotes: 1

J Foley
J Foley

Reputation: 1099

You can achieve this with jQuery:

var height = $('.vertical').width(); $('.vertical').css({'height':height+'px'});

It takes the width of what the TD would have been if horizontal and applies it to the height instead.

Jsfiddle here

Upvotes: 0

Related Questions