手动允许用户在系统中调整<td>的大小

Question

手动允许用户在系统中调整<td>的大小

我正在尝试开发一个系统,使用户能够手动调整textarea和iframe的大小.我已经说明了我的意思:

<body>

    <table width="100%">
        <tr>

        <!-- basically I want the user to be able to manually resize the width of the <td>'s -->

            <td width="30%">
                <textarea style="width:100%; height:100%;"></textarea>
            </td>
            <td width="70%">
                <iframe style="width:100%; height:100%;" src=""></iframe>
            </td>
        </tr>
    </table>

</body>

Run Code Online (Sandbox Code Playgroud)

任何帮助将非常感谢,谢谢:)

Answer 1

VMc*_*tor 5

试试这个:

<!DOCTYPE html>
<html>
<style>
    td
    {
        position:relative;
    }
    .resizable
    {
        min-width:100%;
        min-height:100%;
        width:100%;
        height:100%;
        position:relative;
        display:inline-block;
        resize:both;
        overflow: hidden;
        border:1px solid blue;
        box-sizing: border-box;
    }
</style>
<body>
    <table width="100%">
        <tr>

        <!-- basically I want the user to be able to manually resize the width of the <td>'s -->
            <td style="width:30%">
                <div class="resizable"><textarea style="width:100%; height:100%;"></textarea></div>
            </td>
            <td style="width:70%">
                <div class="resizable"><iframe style="width:100%; height:100%;" src=""></iframe></div>
            </td>
        </tr>
    </table>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

演示

我只是想给你一个主意.

我所做的很简单,因为每个td你需要放置一个可调整大小的div,它具有100%的td大小,然后将所有内容放在div中.每次调整div的大小时,td也会根据div的大小调整大小.

只需添加更多样式即可满足您的需求.

归档时间：	10 年，10 月前
查看次数：	298 次
最近记录：	10 年，10 月前