将输入宽度绑定到表格列宽答案

【问题标题】：Bind input width to table column width将输入宽度绑定到表格列宽
【发布时间】：2012-06-02 05:34:36
【问题描述】：

有一个有 5 列的表格。列可能有不同的宽度（我没有分配恒定的宽度）。

现在我想在表格顶部创建 5 个输入元素。是否有任何技巧可以使每个输入元素的宽度等于相应的列宽？

例如，输入 1 应具有第 1 列的宽度，输入 2 - 应具有第 2 列的宽度等。

那么，如何将输入绑定到列？

更新：

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

【问题讨论】：

你试过添加 style="width:100%;"输入？
你打算用php做什么？
@Chris Gessler：请看 jFiddle。输入具有“宽度：100%”。在这种情况下，每个输入只占用表格的宽度。

标签： javascript jquery html-table width

【解决方案1】：

使用 jQuery 是可能的。查看演示 - http://jsfiddle.net/k9MhG/4/

【讨论】：

谢谢。请查看我的线程中的更新。我发布了完整的代码。所以，有 3 列，最后一列包含一个按钮。当用户单击新记录时，输入会向下滑动。问题还是一样——它们没有继承列的宽度（width="80"）。请帮忙。谢谢。

【解决方案2】：

添加一些 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>

【讨论】：