1

注意：这些问题仅在 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那么，既然我要应用的样式是最后一个，为什么我还需要呢？

4

3 回答 3

1

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

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

!important 声明是与 ID 选择器发生特异性战争的征兆，可能会变得一团糟。我鼓励你使用类而不是 ID 来防止这个问题。

我认为这篇文章解释得很好。走向底部

于 2013-01-25T20:09:23.450 回答
1

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

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

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

前往物业；在这种情况下宽度。按箭头部署它，您将看到有罪规则是什么

于 2013-01-25T20:26:04.643 回答
0

我的回答被版主删除，并转换为“评论”

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

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

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

要使其与标签保持布局，只需将前一个标签向左浮动即可。

继续

于 2013-01-28T18:16:40.107 回答