Question

以下是fiddle

我想将From：textbox To：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＆amp;帮助下做到这一点。 display: table-cell。

包裹你的每个2＆＃34;细胞＆＃34; （文本+输入）占位符元素（例如，<span>），将此包装器元素设置为display: table-cell，将<p>设置为display: table-row。

Here's the fixed fiddle

Answer 3

已经有一些好的答案。您可能会遇到表格行和表格单元格css属性的跨浏览器问题。如果你这样做，你可以给你的输入元素一个＆＃34;显示：inline＆＃34;并设置列的宽度。像这样：

js fiddle code

<input style="display: inline" />

注意js小提琴代码中第th个元素的宽度设置。

如何在一行中获得th标签的内部？

3 个答案: