0

There is a table with 5 columns. Columns might have different width (I don't assign constant width).

Now I want to create 5 input elements just on top of the table. Is there any trick to make width of each input element equal to corresponding column width?

For instance, Input 1 should have the width of Column 1, Input 2 - the width of Column 2, etc.

So, how to bind inputs to columns?

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;
}
4

2 に答える 2

1

jQueryで可能です。デモを確認してください - http://jsfiddle.net/k9MhG/4/

于 2012-05-27T15:02:55.760 に答える
0

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>
于 2012-05-27T14:45:12.083 に答える