CODEWITHSUNDEEP
javascriptjqueryhtml-tablewidth
Klausos Klausos
Klausos Klausos

Reputation: 16050

Bind input width to table column width

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

Upvotes: 0

Views: 1775

Answers (2)

Dipak
Dipak

Reputation: 12190

It's possible with jQuery. Check the demo - http://jsfiddle.net/k9MhG/4/

Upvotes: 1

Chris Gessler
Chris Gessler

Reputation: 23123

Add some JavaScript (at the end or after the page loads) to get the offsetWidth of the top level cells and apply those widths to your inputs.

Something like this:

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

Or, extend your table to include the inputs and set the width to 100%. You can apply styles to the first TR to make it look like it's not really part of the table. The next TR can contain your headers with borders, etc.

<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>

Upvotes: 0

Related Questions