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

我在表格单元格内有文本区域.overlap-text。我怎样才能使文本区溢出它下面的元素，而不是改变其<td>或<tr>的大小时，它的上:focus？使表格单元格内的textarea产生溢出效果

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>

来源

2017-03-02 Tuvia Khusid

尝试将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>

来源

2017-03-02 02:33:58 Stickers

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

回答

相关问题