根据包含DIV自动展开TD

Question

我有一个 3x3 html table。在第二行中，第一列和第三列包含 div，它们被旋转以垂直显示内容。其他单元格正常显示内容。这些垂直 divs 从 TD 高度溢出。我想根据 Div 高度（垂直宽度）动态扩展 TD 高度。

这是来自 fiddle

的代码

已更新

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);
}

提前致谢。

Answer 1

您可以通过 jQuery 实现此目的：

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

它将 TD 水平时的宽度应用到高度上。

Jsfiddle here

Answer 2

在td中使用white-space: pre;。

编辑

检查这个更新的片段。我使用 'writing-mode: tb-rl' 使文本垂直。

检查 Can I Use 浏览器支持

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>

根据包含DIV自动展开TD

Auto expand TD according to contained DIV

css

html-table

vertical-text