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

Question

我正在尝试开发一个系统，使用户能够手动调整 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>

非常感谢任何帮助，谢谢:)

Answer 1

试试这个：

<!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>

Demo

其实我只是想给你一个想法。

我做的很简单，对于每个 td，您需要放置一个大小为该 td 100% 的可调整大小的 div，然后将所有内容放入 div。每次调整 div 的大小时，td 也会根据 div.

的大小调整大小

只需添加更多样式以满足您的需要。

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

Manually allow users to resize <td>'s within a system

html

css

resize