Auto expand TD according to contained DIV

Question

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.

AG_ · Accepted Answer · 2017-03-27T08:40:43.600

1

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>

edited Mar 27 '17 at 08:40

answered Mar 27 '17 at 08:19

AG_

2,589
3
20
32

Great. But this also expanded other cells like the ones with '?' in it in first and last row. Or in other words I want to fit cell with contained contents width/height. – Jawaid Mar 27 '17 at 08:24
awesome. Thanks. This worked perfectly. But when I used that in my app its not displaying contents vertically neither adjusting height. – Jawaid Mar 27 '17 at 09:00
As you can see in http://caniuse.com/#search=writing-mode this property is not supported by Opera Mini. is this your case? – AG_ Mar 27 '17 at 09:07
No Opera is not the case. OK, there is a slight twist now. I have updated my fiddle. I have an input box and a button in the div that I want to show vertical with the cell adjusting to its size. See the updated fiddle at [link](https://jsfiddle.net/mjawaid/a3ody1wq/12/). – Jawaid Mar 27 '17 at 09:15
I've updated my fiddle in the question. It contains input box now which behaves differently from normal text. – Jawaid Mar 27 '17 at 09:33
Accepting the answer as it solves text based problem. TD with Input still needs to be solved. – Jawaid Mar 27 '17 at 15:14

score 0 · Answer 2 · answered Mar 27 '17 at 08:11

0

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

answered Mar 27 '17 at 08:11

J Foley

1,038
1
17
30

I would prefer to use CSS instead of jQuery/Javascript. The reason is JS has to run each time page loads or when rows/columns are added/deleted. Since, this is part of an app where table rows/cols will be added/deleted dynamically. – Jawaid Mar 27 '17 at 08:19

Auto expand TD according to contained DIV

2 Answers2