Question

有一个有 5 列的表格。列的宽度可能不同( 我不指定常数宽度 ) 。

现在我要在表格 < / strong > 上方创建 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;
}

Answer 1

可以使用 jQuery 。请查看演示 - < a href="http://jsfidle. net/ k9MhG/4/" rel=“ no follow” >http://jsfidle. net/k9MhG/4/

Answer 2

添加一些 JavaScript (在页尾或页面加载后) 以获取顶层单元格的偏偏边, 并将这些宽度应用到输入中。

像这样的事情:

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>

友情链接