css - 对表格单元格内的textarea产生溢出效果

Question

我在表格单元格中有一个文本区域.overlap-text。如何使文本区域溢出其下方的元素，并且不更改其位于<td>上的<tr>或:focus的大小？

textarea.overlap-text:focus {
  overflow-y: visible;
  height: 200px;
  z-index: 100;
}

<table border="1">
  <tr class="area-draft-edit visible-in-draft border-bottom-none">
    <td>Text1</td>
    <td>
      <input type="date" class="input-box-format" value="">
    </td>
    <td>
      <textarea class="textarea-format textarea-xs-h overlap-text">Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla BlaBla BlaBla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla</textarea>
    </td>
  </tr>
  <tr class="border-bottom-none">
    <td>
      <span class="visible-in-draft">Live product</span>
      <span class="visible-in-live">Text 2</span>
    </td>
    <td>
      <input type="text" class="input-box-format" value="200.00" disabled>
    </td>
    <td>
      <input type="date" class="input-box-format" value="12-May-2016" disabled>
    </td>
    <td>
      <textarea class="textarea-format textarea-xs-h overlap-text" disabled>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla</textarea>
    </td>
  </tr>
</table>

Answer 1

尝试将textarea设置为position: absolute，您可能需要将width和height设置为td，因为当textarea不再包含在常规内容中时，自动调整大小的表格单元可能会折叠流。

textarea.overlap-text:focus {
  overflow-y: visible;
  height: 200px;
  z-index: 100;
  position: absolute;
  left: 0;
  top: 0;
}

td {
  vertical-align: top;
  width: 150px; /* adjuat */
  height: 50px; /* adjuat */
  position: relative;
}

<table border="1">
  <tr class="area-draft-edit visible-in-draft border-bottom-none">
    <td>Text1</td>
    <td>
      <input type="date" class="input-box-format" value="">
    </td>
    <td>
      <textarea class="textarea-format textarea-xs-h overlap-text">CLICK HERE Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla BlaBla BlaBla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla BlaBla Bla Bla Bla
      </textarea>
    </td>
    <td>
      ...
    </td>
  </tr>
  <tr class="border-bottom-none">
    <td>
      <span class="visible-in-draft">Live product</span>
      <span class="visible-in-live">Text 2</span>
    </td>
    <td>
      <input type="text" class="input-box-format" value="200.00" disabled>
    </td>
    <td>
      <input type="date" class="input-box-format" value="12-May-2016" disabled>
    </td>
    <td>
      <textarea class="textarea-format textarea-xs-h overlap-text" disabled>Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla
      </textarea>
    </td>
  </tr>
</table>