CSS problem of floating layer position in table td_html/css

CSS problem of floating layer position in table td_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:09:48

Original

1358 people have browsed it

<html><head>    <style type="text/css">        .td_myadd        {            vertical-align: bottom;        }    </style>     <script language="javascript" type="text/javascript">         function getSelectedValue(ddl_id, text_id) {             var obj = document.getElementById(ddl_id);             var obj2 = document.getElementById(text_id);             for (var i = 0; i < obj.options.length; i++) {                 if (obj.options[i].selected) {                     // return obj.value;                     if (obj.options[i].value.length > 0)                         obj2.value = obj.value;                 }             }         }    </script></head><body>    <table style="border:1px solid # 000;">        <tr>            <td class="td_myadd" name="tname_dg4" style="display: ">                <textarea name="sbd_repeater1$Repeater1$ctl00$txtbox_dg4|5" rows="2" cols="20" id="Textarea4"                    class="usernameFldinput" onblur="javascript:this.style.backgroundColor= ''" onfocus="javascript:this.style.backgroundColor= '#FFC1C1'"                    onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.scrollHeight + 'px'"                    onkeypress="if (event.keyCode!=46 &amp;&amp; event.keyCode!=45 &amp;&amp; (event.keyCode&lt;48 || event.keyCode>57)) event.returnValue=false"                    style="overflow-y: hidden; height: 18px; width: 36px; border-bottom: black 1px solid;                    border-top-style: none; border-right-style: none; border-left-style: none; ime-mode: disabled;"></textarea>            </td>            <td class="td_myadd" name="tname_dg4" style="display: ">                <textarea name="sbd_repeater1$Repeater1$ctl00$txtbox_dg4|5" rows="2" cols="20" id="sbd_repeater1_Repeater1_ctl00_txtbox_dg4|5"                    class="usernameFldinput" onblur="javascript:this.style.backgroundColor= ''" onfocus="javascript:this.style.backgroundColor= '#FFC1C1'"                    onpropertychange="this.style.height=this.scrollHeight + 'px'" oninput="this.style.height=this.scrollHeight + 'px'"                    onkeypress="if (event.keyCode!=46 &amp;&amp; event.keyCode!=45 &amp;&amp; (event.keyCode&lt;48 || event.keyCode>57)) event.returnValue=false"                    style="overflow-y: hidden; height: 18px; width: 36px; border-bottom: black 1px solid;                    border-top-style: none; border-right-style: none; border-left-style: none; ime-mode: disabled;"></textarea>            </td>            <td class="td_myadd" name="tname_sl2111" style="display: ">                <div style="margin-bottom: 20px; width: 61px">                    <div style="position: absolute; z-index: 1">                        <select name="sbd_repeater1$Repeater1$ctl00$txtbox_sl2111|5$ddl1" id="sbd_repeater1_Repeater1_ctl00_txtbox_sl2111|5_ddl1"                            onclick="getSelectedValue('sbd_repeater1_Repeater1_ctl00_txtbox_sl2111|5_ddl1','sbd_repeater1_Repeater1_ctl00_txtbox_sl2111|5_tb1')"                            style="border-bottom: black 1px solid; border-top-style: none; border-right-style: none;                            border-left-style: none; width: 61px;">                            <option value=""></option>                            <option value="不含税">不含税</option>                        </select>                    </div>                    <div style="position: absolute; z-index: 2">                        <input name="sbd_repeater1$Repeater1$ctl00$txtbox_sl2111|5$tb1" type="text" id="sbd_repeater1_Repeater1_ctl00_txtbox_sl2111|5_tb1"                            style="width: 46px; border-bottom: black 1px solid; border-top-style: none; border-right-style: none;                            border-left-style: none; width: 46px;" />                    </div>                </div>            </td>            <td class="td_myadd" name="tname_dw" style="display: ">                <div style="margin-bottom: 20px; width: 61px">                    <div style="position: absolute; z-index: 1">                        <select name="sbd_repeater1$Repeater1$ctl00$txtbox_dw|5$ddl1" id="sbd_repeater1_Repeater1_ctl00_txtbox_dw|5_ddl1"                            onclick="getSelectedValue('sbd_repeater1_Repeater1_ctl00_txtbox_dw|5_ddl1','sbd_repeater1_Repeater1_ctl00_txtbox_dw|5_tb1')"                            style="border-bottom: black 1px solid; border-top-style: none; border-right-style: none;                            border-left-style: none; width: 61px;">                            <option value=""></option>                            <option value="PCS">PCS</option>                            <option value="个">个</option>                            <option value="公斤">公斤</option>                            <option value="计">计</option>                            <option value="元">元</option>                        </select>                    </div>                    <div style="position: absolute; z-index: 2">                        <input name="sbd_repeater1$Repeater1$ctl00$txtbox_dw|5$tb1" type="text" id="sbd_repeater1_Repeater1_ctl00_txtbox_dw|5_tb1"                            style="width: 46px; border-bottom: black 1px solid; border-top-style: none; border-right-style: none;                            border-left-style: none; width: 46px;" />                    </div>                </div>            </td>        </tr>                    </table></body></html>

Copy after login

输入框会自动换行，把TD撑大，TD的样式 vertical-align: bottom;
但是右边的没有居下

右边的是可输入的下拉框，做了3个层，一个输入框，一个下拉框，
我想TD撑大时那堆东西都居下对齐。有没有用样式可以解决的方案。不用JS。