html表格單元格以更好的方式顯示在inputbox中輸入的文本

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>

小提琴演示：

中間頁

更新：感謝@ Manish Joshi博士

我可以在這里達到預期的效果。

但是它在jsfiddle中工作正常，但是當我嘗試在瀏覽器中運行時，它拋出了JavaScript錯誤。

未捕獲的typeerror無法讀取null的屬性'addeventlistener'

Answer 1

使用table-layout屬性。 table-layout:fixed將調整單元格以占據表的相等空間。

寫：

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

在這里更新了小提琴 。

Answer 2

你可以試試

   <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

html表格單元格以更好的方式顯示在inputbox中輸入的文本

問題描述

2 個解決方案

解決方案1
1 2014-07-05 07:51:36

解決方案2
1 2014-07-05 08:08:53

html表格單元格以更好的方式顯示在inputbox中輸入的文本

問題描述

2 個解決方案

解決方案1 1 2014-07-05 07:51:36

解決方案2 1 2014-07-05 08:08:53

解決方案1
1 2014-07-05 07:51:36

解決方案2
1 2014-07-05 08:08:53