css - 如何让剑道 NumericalTextBox 以与剑道 DropDownList 相同的方式共享表格单元格的宽度？

Question

我有一个非常简单的表格，放在一个只有一行和两个单元格的表格中。我在一个单元格中有一个剑道 NumericalTextBox，在另一个单元格中有一个文本输入。我将表格宽度设置为 100%，单元格上没有宽度。

问题: 问题在于 NumericalTextBox 在其单元格中占据了超过 50% 的宽度，并挤压了文本输入。

我已经用剑道 DropDownList 对此进行了测试，它工作正常。只需要50%。

为什么 NumericalTextBox 将其单元格扩展到 50% 以上，我该如何阻止它这样做？ 我意识到我可以在表格单元格上放置一个 style="width:50%"，但这对较大的表格来说是一种开销，就像你添加一个单元格一样，你必须去更新所有其他单元格的宽度百分比等...... 理想情况下，我只想说表格的宽度为 100%，单元格将平均分配该宽度，并且每个单元格中的每个控件将占据单元格宽度的 100%。

我整理了一个演示页面来展示正在发生的事情:

HTML:

<div id="testContainer">
    <strong>Numerical TextBox and DropDownList</strong>
    <table class="mistro-form">
        <tr>
            <td>
                <label>Numerical TextBox:</label>
                <input data-role="numerictextbox"
                data-format="n0"
                data-min="0"
                data-decimals="0" />
            </td>
            <td>
                <label>Drop Down List:</label>
                <select name="Include Title"
                data-role="dropdownlist"
                data-value-primitive="true">
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
            </td>
        </tr>
    <table>

    <div style="height:20px"></div>

    <strong>Drop Down List and Text Input</strong>
    <table class="mistro-form">
        <tr>
            <td>
                <label>Drop Down List:</label>
                <select name="Include Title"
                data-role="dropdownlist"
                data-value-primitive="true">
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
            </td>
            <td>
                <label>Include Title:</label>
                <input type="text" class="form-control" />
            </td>
        </tr>
    <table>
</div>

CSS:

table.mistro-form {
    width:100%;
}
.mistro-form td {
    padding: 5px;
    vertical-align: top !important;
}
.mistro-form .k-dropdown, .mistro-form .k-combobox, .mistro-form  .k-numerictextbox, .mistro-form  .k-textbox, .mistro-form .k-numerictextbox {
    width: 100% !important;
}

JavaScript:

$(document).ready(function() {
    kendo.init($('#testContainer'));
});

这是上面代码的一小部分:http://jsfiddle.net/codeowl/UQdGQ/6/

谢谢你的时间，

问候，

斯科特

Answer 1

好的，我刚刚解决了这个问题。我只需要将 table-layout css 属性设置为 fixed；

例如；

table.mistro-form {
    width:100%;
    table-layout:fixed;
}

希望这可以为其他人节省一些时间 ;-)