css - 根据包含的DIV自动扩展TD

Question

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

这是小提琴的代码

更新

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

white-space: pre;中使用td。

编辑

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

检查我是否可以用于浏览器支持

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>

Answer 2

您可以使用 jQuery 实现此目的：

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

它取 TD 水平时的宽度，并将其应用于高度。

Jsfiddle在这里