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>

在表格单元格内的textarea上产生溢出效果

1 个答案: