HTML表格单元格以更好的方式显示输入框中输入的文本

html table cells to display text entered in inputbox in a better way

本文关键字：输入 表格 文本 显示 方式 更好 HTML 单元格      更新时间：2023-09-26

我有一个动态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>

小提琴演示:

小提琴页

更新:感谢@dr Manish Joshi

我能够在这里达到预期的结果。

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

未捕获的类型错误无法读取null属性'addeventlistener'

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

写:

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

更新提琴在这里

你可以试试

   <td>
 <input type="text" name="col1" class="col1" length="20"/>
 </td>
     <td>
 <input type="text" name="col2" class="col2" length="20"/>
 </td>
     <td>
 <input type="text" name="col3" class="col3" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/>
 </td>
     <td>
 <input type="text" name="col4" class="col4"  onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/>
 </td>
     <td>

jsfiddle - http://jsfiddle.net/Vu8HC/6/

编辑:

按codepen。在Io/vsync/pen/czgrf中，您的代码将看起来像下面的textarea 

<html>
<head>
<style>
body{ background:#c0c0c0; color:#8c001a; }
/*( 'box-sizing' will not work with this code )*/
textarea{  
  /* box-sizing: padding-box; */
  overflow:hidden;
  /* demo only: */
  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  display:block;
  border-radius:10px;
  border:1px solid #8c001a;
}
</style>
</head>
<body>

<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea>
<script>
var textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', autosize);
function autosize(){
var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    // for box-sizing other than "content-box" use:
    // el.style.cssText = '-moz-box-sizing:content-box';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
  },0);
}
</script>
</body>
</html>

您可以在这个链接上看到浏览器中的工作示例:http://ayurvedvishva.com/e_nima/jstest

相关文章：