如何在一行上得到th标签的内部信息？

Question

这是小提琴

我想从: textbox到: textbox全部放在一行上。

<table class="table display" id="activeProjects">
    <thead>

        <tr>
            <th>Project Name</th>
            <th>Project Number</th>
            <th>Market</th>
            <th>Project Type</th>
            <th>Completion Date</th>
            <th>Square Footage</th>
            <th>Architect</th>
            <th>Manager</th>

        </tr>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th><p style="white-space: nowrap;">From: <input type="text" id="min" name="min" class="form-control numberFilter" /> To: <input class="form-control numberFilter" type="text" id="max" name="max" /></p></th>
            <th></th>
            <th></th>
        </tr> 

    </thead>

    <tbody>
        <tr ng-repeat="project in model.projects">
            <td></td>
            <td><a href></a></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Project Name</th>
            <th>Project Number</th>
            <th>Market</th>
            <th>Project Type</th>
            <th>Completion Date</th>
            <th>Square Footage</th>
            <th>Architect</th>
            <th>Manager</th>
        </tr>

    </tfoot>
</table>

.numberFilter {
width: 75px;
}

Answer 1

您的标题可能需要修改，但请尝试如下：

.numberFilter {
    width: 15%;
    white-space: nowrap;
    display:inline-block;
}

您可以编辑宽度值以适应，但这只是一个指南。除非设置TH / TD宽度，否则无法在PX中修复输入的宽度。

Answer 2

您可以在display: table-row & display: table-cell的帮助下做到这一点。

将每个2“单元格”(文本+输入)包装在占位符元素(例如，<span>)中，将该包装器元素设置为display: table-cell，将<p>设置为display: table-row。

这是固定的小提琴

Answer 3

已经有一些很好的答案了。您可能会遇到跨浏览器问题，涉及表行和表单元css属性。如果您这样做了，您可以只给输入元素一个“显示:内联”，并设置列的宽度。就像这样：

js小提琴代码

<input style="display: inline" />

注意js篡改代码中th元素的宽度设置。