Question

注意：这些问题仅发生在Firefox或Chrome中。 IE似乎没有同样的问题。

HTML

    <div id="renewals-div">
        <label for="renewals">Renewals:</label>
        <input type="hidden" name="renewal_count" id="renewal_count" value="0">
        <table id="renewals">
            <thead>
                <tr data-num="-1" class="header">
                    <th class="date_column">Date</th>
                    <th class="details_column">Details</th>
                </tr>
            </thead>
            <tbody>
                <!-- rows populated by ajax call on load -->
            </tbody>
        </table>
        <br>
        <label for="add_renewal-div"></label> <!-- spacer -->
        <span id="renewal_buttons-span">
            <button type="button" id="add_renewal">Add</button>
            <button type="button" id="remove_renewal">Remove</button>
        </span>
    </div>

CSS

form {
    width: 100%;
    padding-left: 2em;
}

form fieldset {
    border: none;
    margin: 0 0;
    padding: 0 0;
}

form div {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: .2em;
}

form label {
    display: inline-block;
    padding-bottom: 10px;
    width: 30%;
    max-width: 15em;
    vertical-align: top;
}

form input[type=submit] {
    /*float: left;*/
    width: 75px;
    height: 35px;
}

.radio_group {
    width: 70%;
}

form input[type=text] {
    width: 50%;
    max-width: 400px;
    display: inline-block;
}

/* Renewals table and other stuff */
table {
    table-layout:fixed;
    width: 51%;
    max-width: 404px;
    border-collapse: collapse;
    display: inline-block;
}

table td, table th {
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}

table input {
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    width: 95% !important;
    margin: 3px 3px;
}

table tr:hover:not(.selected):not(.header) {
    background-color: #D6ADFF;
}

table .selected {
    background-color: #522D80;
    color: white;
}

.header {
    width: 100%;
}

.date_column {
    width: 25%;
}

.details_column {
    width: 75%;
}

#renewal_buttons-span button {
    width: 5em;
    height: 2.5em;
}

/*********************************/

div.ui-datepicker {
    font-size:10px;
}
/*@media (max-width: 650px) {*/

JS

    $('#remove_renewal').click(function() {
        var next = $('.selected').next('tr');
        $('.selected').remove();
        if (next.length === 0) {
            $('#renewals tbody tr').last().click();
        } else {
            next.click();
        }
    });

我的问题是“续订：”表。我允许用户向表中添加和删除行。默认情况下，在页面加载时加载两个测试行。如果删除它们，则表格列突然不再符合其宽度属性。由于<th>列是唯一剩下的列，我认为它们不符合我的宽度设置。即使没有行，我怎样才能让他们尊重宽度？

编辑：下面的问题已解决。我误解了CSS选择器根据CSS文件中的最后一个覆盖彼此。显然，样式由最具体的选择器决定。通过将我的第二个选择器更改为input[type=text]，它就足以在不使用!important的情况下覆盖前一个选择器。

附带问题： 我对表中输入框的宽度有第二个问题。我有两个影响输入宽度的CSS选择器：

form input[type=text] {
    width: 50%;
    max-width: 400px;
    display: inline-block;
}

table input {
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
    width: 95% !important;
    margin: 3px 3px;
}

正如您所看到的，将宽度设置为95%的选择器位于前一个之后，因此它应该优先。但是，如果我取出!important 50%宽度会覆盖95%！在CSS中，我认为对于冲突的样式，最后一个声明/选择获胜？那么为什么我仍然需要!important，因为我想要应用的样式是最后一个？

Answer 1

我在#date_col上设置了一个宽度，并且能够防止崩溃

我注意到.header没有与之关联的任何样式，因此您可以尝试在其中放入宽度值，然后让两个单元格填充其父容器。一个是25％，另一个是75％，但他们没有父母参考。

！important声明是与ID选择器进行特异性战争的症状，可能会变成一团糟。我鼓励你使用类而不是ID来防止这个问题。

我认为this文章解释得很好。接近底部

Answer 2

如果您想知道为什么需要重要，请将其删除。

然后，在Chrome中，转到开发工具。检查有问题的元素。在右侧面板中，在“样式”中，您将看到该属性已越过。

现在，转到Computed Style，上面的面板。

前往酒店;在这种情况下宽度。按箭头部署它，你会看到什么是有罪的规则

Answer 3

主持人删除了我的回答，并将其转换为“评论”

我首先注意到你的表格显示有一个内联块。

尝试显示：表格。 TABLE布局的所有机制都将遵守。

table {
    border-collapse: collapse;
    display: table; /* you can even remove this part*/
    max-width: 404px;
    table-layout: fixed;
    width: 51%;
}

为了使其标签保持布局，只需将前一个标签浮动。

继续

细胞不保持宽度

3 个答案: