javascript - html表格单元格以更好的方式显示在输入框中输入的文本

Question

我有一个动态 html 表，用户可以在其中填写某些详细信息。问题是，最后两个输入列的数据长度有时可能很大。有人可以建议我显示最后两个输入框的最佳方式，以便用户在填写详细信息后能够轻松查看他输入的内容。以目前的设置，他无法一眼就看到整个输入框的数据。

HTML:

<table id="master_table" border="0">
     <tr>
     <th>COL1</th>
     <th>COL2</th>
     <th>COL3</th>
     <th>COL4</th>
     <td>&nbsp;</td>
     </tr>
     <tr>
     <td>
     <input type="text" name="col1" class="col1"/>
     </td>
         <td>
     <input type="text" name="col2" class="col2"/>
     </td>
         <td>
     <input type="text" name="col3" class="col3"/>
     </td>
         <td>
     <input type="text" name="col4" class="col4"/>
     </td>
         <td>
     <input type="button" name="addRow" class="add" value='Add'/>
     </td>
         <td>
     <input type="button" name="removeRow" class="removeRow" value='Delete'/>
     </td>
     </tr>
     <tr>
     <td colspan="4" align="center">
     <input type="button" name="submit_data" class="submit" value="Submit" onclick="myFunction()"/>
     </td>
     </tr>
     </table>

fiddle 演示:

FIDDLE PAGE

更新:感谢@dr Manish Joshi

我能够达到预期的结果HERE .

但它在 jsfiddle 中运行良好，但是当我尝试在浏览器中运行时它抛出 javascript 错误。

uncaught typeerror cannot read property 'addeventlistener' of null

Answer 1

使用 table-layout 属性。 table-layout:fixed 将调整单元格以占用表格的相等空间。

写:

#master_table{
    width:100%;
    table-layout:fixed;
}

已更新 fiddle在这里。