將輸入寬度綁定到表格列寬度

Question

有一個包含5列的表格。列可能有不同的寬度（我不分配恆定的寬度）。

現在我想在表的頂部創建5個輸入元素。是否有任何訣竅使每個輸入元素的寬度等於相應的列寬？

例如，輸入1應具有第1欄，輸入2的寬度 - 第2欄的寬度等

所以，如何結合輸入列？

UPDATE：

<script> 
$('#addButton').click(function() { 
    $("#addContent").slideToggle("slow"); 
    $('input').width(+$('table td').width()-1); 
}); 
</script> 

<div id = "add"> 
    <div id = "addButton" title='New Record' ;> 
     <img src='images/add.png' alt='New Record' /> 
    </div> 

    <div id = "addContent"> 
         <input type="text"> 
         <input type="text"> 
    </div> 
</div> 

       <table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%"> 
        <thead> 
         <tr> 
          <th scope="col">Opr</th> 
          <th scope="col">Flt Num</th> 
          <th scope="col"></th> 
         </tr> 
        </thead> 
        <tbody> 
         <?php foreach ($result1 as $row): 
          $status=$row['status']; 
          $airlineName=$row['airlineName']; 
          $flightNum=$row['flightNum']; 
         ?> 
         <tr id="<?php echo $flightNum; ?>" class="edit_tr"> 
          <td width="80" ><?php echo $airlineName;?></td> 
          <td width="80" ><?php echo $flightNum;?></td> 
          <td width="80" id="<?php echo $flightNum; ?>" class="deact_but"> 
           <div> 
            <img src='images/delete.png' alt='Deactivate' /> 
           </div>    
          </td> 
         </tr> 
         <?php endforeach;?> 
        </tbody> 
       </table>  

CSS

input{ 
    float: left; 
    margin: 0; 
    padding: 0; 
} 

Answer 1

添加一些JavaScript（末尾或在頁面加載後），以獲得頂級細胞的offsetWidth和應用這些寬度以你的投入。

事情是這樣的：

document.getElementById('myInput').style.width = document.getElementById('myTable').rows[0].cells[0].offsetWidth; 

或者延長你的表包括輸入和寬度設置爲100％。您可以將樣式應用到第一個TR，使其看起來不像表中的一部分。下一個TR可以包含帶有邊框的標頭等。

<table> 
    <tr> 
     <td><input type="text"></td> 
     <td><input type="text"></td> 
     <td><input type="text"></td> 
    </tr> 
    <tr> 
     <td><br/><br/><br/></td> 
    </tr> 
    <tr> 
     <td>ContentContent</td> 
     <td>Content</td> 
     <td>Cont</td> 
    </tr> 
</table> 

Answer 2

jQuery有可能。檢查演示 - http://jsfiddle.net/k9MhG/4/