Question

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

问题：问题是NumericalTextBox占用了它的单元格中超过50％的宽度，并且压缩了文本输入。

我用kendo DropDownList对此进行了测试，它运行正常。它只需要50％。

为什么NumericalTextBox将它的单元格推出超过50％？如何阻止它执行此操作？我意识到我可以在表格单元格上放置一个样式=“宽度：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;
}

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

如何让kendo NumericTextBox以与它们相同的方式分享表格单元格的宽度DropDownList呢？

1 个答案: