Question

我有一个表格，显示带有标签和输入字段的表单。我要做的是创建一个文本框，重叠表中的行而不更改textarea所在的行高。

我想这样做，因为在行中有更多的输入字段，我想要包含其他行的高度。

HTML：

==================================================
Dump File         : Mini110415-01.dmp
Crash Time        : 11/4/2015 4:38:38 PM
Bug Check String  : RESOURCE_NOT_OWNED
Bug Check Code    : 0x000000e3
Parameter 1       : 0x8a2ef7f8
Parameter 2       : 0x891f4690
Parameter 3       : 0x00000000
Parameter 4       : 0x00000002
Caused By Driver  : win32k.sys
Caused By Address : win32k.sys+19f4
File Description  : 
Product Name      : 
Company           : 
File Version      : 
Processor         : 32-bit
Crash Address     : ntoskrnl.exe+22fa3
Stack Address 1   : ntoskrnl.exe+5ea49
Stack Address 2   : win32k.sys+19f4
Stack Address 3   : win32k.sys+157286
Computer Name     : 
Full Path         : E:\Mini110415-01.dmp
Processors Count  : 4
Major Version     : 15
Minor Version     : 2600
Dump File Size    : 94,208
Dump File Time    : 11/4/2015 4:52:10 PM
==================================================

CSS：

      <table class="table">
            <thead></thead>
            <tbody>
                <tr class="form-row-1">
                    <!-- Column 1 row 1-->
                    <td class="form-column column-label-1">
                        <form>
                            <label>Abonnement</label>
                        </form>
                    </td>
                    <td class="form-column column-content-1">
                        <form>
                            <input type="text" name="Abonnement">
                        </form>
                    </td>

                    <!-- Column 2 row 1 -->
                    <td class="form-column column-label-2">
                        <form>
                        <!-- Add input fields here to create labels -->
                        </form>
                    </td>
                     <td class="form-column column-content-2">
                        <form>
                        <!-- Add input fields here to create input/select fields -->
                        </form>
                    </td>

                    <!-- Column 3 row 1-->
                    <td class="form-column column-label-3">
                        <form>
                            <label>Abonnementsstatus:</label>
                        </form>
                    </td>
                     <td class="form-column column-content-3">
                        <form>
                            <select name=" ">
                                <option value="niks">Non-actief</option>
                            </select>
                        </form>
                    </td>
                </tr>
                <tr class="form-row-2">
                    <!-- Column 1 row 2-->
                    <td class="form-column column-label-1">
                        <form>
                            <label>Omschrijving</label>
                        </form>
                    </td>
                    <td class="form-column column-content-1">
                        <form>
                            <textarea rows="1" cols="30" name="lastname" style="overflow-y:expand;"></textarea>
                        </form>
                    </td>
                    <!-- Column 2 row 2-->
                    <td class="form-column column-label-2"></td>
                    <td class="form-column column-content-2"></td>

                    <!-- Column 2 row 3-->
                    <td class="form-column column-label-3">
                        <form>
                            <label>Frequentie:</label>
                        </form>
                    </td>
                     <td class="form-column column-content-3">
                        <form>
                            <select name=" ">
                                <option value="niks">Non-actief</option>
                            </select>
                        </form>
                    </td>
                </tr>
                <tr class="form-row-3">
                    <!-- Column 3 row 1-->
                    <td class="form-column column-label-1"></td>
                    <td class="form-column column-content-1"></td>
                    <!-- Column 3 row 2-->
                    <td class="form-column column-label-2"></td>
                    <td class="form-column column-content-2"></td>

                    <!-- Column 3 row 3-->
                    <td class="form-column column-label-3">
                        <form>
                            <label>Frequentiebereik:</label>
                        </form>
                    </td>
                    <td class="form-column column-content-3">
                        <form>
                            <select name=" ">
                                <option value="niks"></option>
                            </select>
                        </form>
                    </td>
                </tr>
                 <tr class="form-row-4">
                    <!-- Column 4 row 1-->
                    <td class="form-column column-label-1"></td>
                    <td class="form-column column-content-1"></td>
                    <!-- Column 4 row 2-->
                    <td class="form-column column-label-2"></td>
                    <td class="form-column column-content-2"></td>

                    <!-- Column 4 row 3-->
                    <td class="form-column column-label-3">
                        <form>
                            <label>Bet. voorwaarden:</label>
                        </form>
                    </td>
                    <td class="form-column column-content-3">
                        <form>
                            <select name=" ">
                                <option value="niks"></option>
                            </select>
                        </form>
                    </td>
                </tr>
                 <tr class="form-row-5">
                    <!-- Column 5 row 1-->
                    <td class="form-column column-label-1"></td>
                    <td class="form-column column-content-1"></td>
                    <!-- Column 5 row 2-->
                    <td class="form-column column-label-2"></td>
                    <td class="form-column column-content-2"></td>

                    <!-- Column 5 row 3-->
                    <td class="form-column column-label-3">
                        <form>
                            <label>Onze ref.:</label>
                        </form>
                    </td>
                    <td class="form-column column-content-3">
                        <form>
                            <select name=" ">
                                <option value="niks"></option>
                            </select>
                        </form>
                    </td>
                </tr>
                 <tr class="form-row-6">
                    <!-- Column 6 row 1-->
                    <td class="form-column column-label-1"></td>
                    <td class="form-column column-content-1"></td>
                    <!-- Column 6 row 2-->
                    <td class="form-column column-label-2"></td>
                    <td class="form-column column-content-2"></td>

                    <!-- Column 6 row 3-->
                    <td class="form-column column-label-3">
                        <form>
                            <label>Referentie:</label>
                        </form>
                    </td>
                    <td class="form-column column-content-3">
                        <form>
                            <input type="text">
                        </form>
                    </td>
                </tr>
                <!-- More table rows below-->

            </tbody>
        </table>
    </div>

JSfiddle here;

因此，如果我拖动我的textarea，行的高度必须保持不变。可以使用CSS，HTML，JavaScript吗？

Answer 1

你可以尝试这个先生：

textarea {
    overflow-y:hidden;
    resize:vertical;   
    position:fixed;
    width:167px;
}

select {
    vertical-align:baseline;
    width:100%;
    box-sizing:border-box;
}

td {
    vertical-align:top;
}

DEMO HERE

或

textarea { overflow-y:hidden; resize:vertical; max-height:120px; width:167px; } select { vertical-align:baseline; width:100%; box-sizing:border-box; } td { vertical-align:top; }

DEMO UPDATED

Answer 2

在此JS Fiddle

中

<td class="form-column column-content-1" rowspan="5">
                    <form>
                        <textarea rows="1" cols="30" name="lastname" style="overflow-y:expand;"></textarea>
                    </form>
                </td>

还可以在textarea规则中将其添加到您的CSS中：

max-height:120px;

这样它永远不会破坏你的表单设计

Textarea必须重叠div而不增加div高度

2 个答案: