테이블 열 너비에 대한 입력 너비 바인딩

Question

5 개의 열이있는 테이블이 있습니다. 열의 너비가 다를 수 있습니다 (일정한 너비를 지정하지 않음).

이제 의 입력 요소 5 개를 테이블 위에 작성하려고합니다. 각 입력 요소의 너비를 해당 열 너비와 동일하게 만드는 트릭이 있습니까? 열 두의 폭 등

그래서, 어떻게 컬럼에 입력을 바인딩 -

는 예를 들어, 입력 1은 열 1, 입력 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

(끝 또는 페이지가로드 후) 일부 자바 스크립트를 추가 최상위 세포의 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/