Question

我有一个显示数据库信息的表。问题是，如果我在<td></td>内显示长文本，那么它会正确显示并且单元格会根据大小进行扩展，但是当输入标记内显示相同的文本时，单元格和输入都不是扩展到适应整个文本。

我曾尝试设置width="100%"它会稍微扩展文字但仍然需要在文本框中滚动才能看到其他文字。

这是示例

 <table cellspacing="8" cellpadding="2" border="0" bgcolor="#00eeee">
   .
   .
  <tr>
     <td>HELLO THIS IS ME INSIDE THIS CELL</td>

    .
    .
    .

     <td><input type="text" name="myname" style="width:100%; border: 0; background: transparent; text-align: center;" value="HELLO THIS IS ME INSIDE THIS CELL"/>
      </td>
   </tr>

  </table>

输出：

Col1        Col2                                Col3        Col4        Col5

XYZ         HELLO THIS IS ME INSIDE THIS CELL   PQR         STU         HELLO THIS IS

修改

我已经遇到过这个问题Text input with 100% width inside a td expands/continues outside the td。它是关于<td>之外的文本溢出，但是我处理文本隐藏输入元素。

将输入和表格的宽度设置为100％可解决问题。但是，我不想设置表格宽度=＆＃34; 100％＆＃34;因为它妨碍了我的UI设计。同样<td width="30%">为特定列提供了技巧，但我不想手动设置它，它应该自动完成。

所以如果有任何方法可以根据输入元素内容自动调整td大小，那么肯定会有所帮助。所以请帮帮我。

由于

Answer 1

以下是代码和fiddle。

HTML

<table cellspacing="8" cellpadding="2">
    <tr>
     <td>HELLO THIS IS ME INSIDE THIS CELL</td>
     <td style="width:100%">
         <input type="text" name="myname"  value="HELLO THIS IS ME INSIDE THIS CELL" size="50"/>
      </td>
        <td>HELLO THIS IS ME INSIDE THIS CELL</td>
   </tr>

  </table>

CSS

table{
    width: 100%;
    background-color:#00eeee;
    border:0;
    display:block;
    overflow:auto;
}

input{
    width:initial; 
    background: transparent; 
    text-align: center;
    border: 0; 
}

Answer 2

修复您的风格style="border: 0; width:100%; background: transparent; text-align: center;"

检查这些带有固定td宽度和其他没有宽度的小提琴。 http://jsfiddle.net/a4vrwrrw/1/和http://jsfiddle.net/s3vtgz7q/1/

修改

尝试使用textarea而不是输入 - jsfiddle.net/s3vtgz7q/5

Answer 3

尝试为您的桌子设置宽度100％。<td>的宽度也是

<table cellspacing="8" cellpadding="2" border="0" bgcolor="#00eeee" style="width:100%">

Answer 4

尝试这种方法来解决这个问题但这不是正确的方法。

I will try to fulfil :)

jsFiddle

长文本正确显示但不在<input type =“text”/>中

4 个答案: