html - 如何根据嵌套文本框的内容自动为td分配宽度

Question

我只是网络开发的初学者。我已经彻底搜索但没有找到满意的答案，尽管有一些替代方案可用，如下所述。

看这个例子http://jsfiddle.net/79aojg8m/4/

HTML:

<table cellspacing="2" cellpadding="2" border="0" bgcolor="#00eeee">
 <tr>
  <td>HELLO THIS IS ME INSIDE THIS CELL 1</td>
  <td><input type="text" name="col2" style="width:100%; border:0; background: transparent; text-align: center;" value="HELLO THIS IS ME INSIDE THIS CELL">
  </td>
  <td><input type="text" name="col3"  value="Hello"/></td>
  <td><input type="text" name="col4"  value="World"/></td>
  <td><input type="text" name="col5"  value="H W"/></td>
</tr>

CSS:

table
{   
 position: relative;
 border: 1px solid #b6e9f0;
 color: #0d5893;
 margin: 2%;    
 -moz-box-align: center;
 padding: 1em;      
 border-radius: 2em;
 background: #b6e9ff;
 overflow:auto;  
}


input,select,textarea
{
 font-size: 12pt;
 border: 0.1em solid black;
 width:60%;
 height: 2em;
 align: left;
 border-radius: 0.2em;
 margin-bottom: 2%;
 margin-top: 2%;
 white-space: nowrap;
 box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box; 
}

在上面的代码中，某些列的内容没有正确显示，因为所有单元格都分配了几乎相同的宽度，但是，我希望 td 的宽度应该等于子元素内容文本(输入值)的宽度。

值得注意的一件有趣的事情是，如果 <td> 中没有嵌套元素，单元格会自动调整大小。 .

将输入和表格的宽度都设置为 100% 可以解决问题。但是，我不想设置 table width="100%"因为它妨碍了我的 UI 设计。还有 <td width="30%">为那个特定的列做了技巧，但我不想手动设置它，它应该自动完成。

那么有什么方法可以根据输入元素内容自动调整 td 的大小。

在此先感谢您的帮助。

Answer 1

表格元素不会以这种方式表现，但我相信这应该可以满足您的需求。 white-space:nowrap;width:1%;.