使表格單元格內的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>