入力ボックスのサイズをcssで既にテキストに合わせて変更するには

Question

データベースを表示し、表示されているものから入力を編集できるようにPHPコードを使用しています。ボックス内のテキストのサイズに変更されます。 これは私のPHPコードです。あなたが達成したい何

<table> 
<tr> 
    <th>Title</th> 
    <th>Description</th> 
    <th>Venue</th> 
    <th>Category </th> 
    <th>Start Date</th> 
    <th>End Date</th> 
    <th>Price(£)</th> 
</tr> 
<?php 
while($row = mysqli_fetch_array($records)) 
{ 
    echo "<tr><form action=editClick.php method=post>"; 
    echo "<td><input type=text name=title value='".$row['eventTitle'],"'></td>"; 
    echo "<td><input type=text name=desc value='".$row['eventDescription'],"'></td>"; 
    echo "<td><input type=text name=venue value='".$row['venueID'],"'></td>"; 
    echo "<td><input type=text name=cat value='".$row['catID'],"'></td>"; 
    echo "<td><input type=text name=start value='".$row['eventStartDate'],"'></td>"; 
    echo "<td><input type=text name=end Date value='".$row['eventEndDate'],"'></td>"; 
    echo "<td><input type=text name=price value ='".$row['eventPrice'],"'></td>"; 
    echo "<input type=hidden name=id value='".$row['eventID']."'>"; 

    echo "<td><input type=submit value=Edit></td>"; 
    echo "</form></tr>"; 
} 

?> 

Answer 1

は良いデザインではありません。入力テキストボックス内の値が '1'や 'a'のような単一の文字である場合、特にテーブルの内部にある場合は、デザインと一貫性がありませんが、実際に強制する場合はjqueryこのように：あなたの投票 "アップ" 場合

function resizeInput() { 
    $(this).attr('size', $(this).val().length); 
} 

$('input[type="text"]') 
    // event handler 
    .keyup(resizeInput) 
    // resize on page load 
    .each(resizeInput); 

http://jsfiddle.net/nrabinowitz/NvynC/