Javascript <；th>；不保持宽度的单元格

注意：这些问题只出现在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>

JS

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) {*/

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

我的问题是“续约：”表。我允许用户向表中添加和删除行。默认情况下，页面加载时加载两个测试行。如果同时删除这两个列，表列的宽度属性将突然消失。由于只剩下

列，因此我假设它们不符合我的宽度设置。即使没有行，我怎样才能让他们尊重宽度

编辑：下面的次要问题已解决。我误解CSS选择器是基于CSS文件中的最后一个选择器相互覆盖。显然，样式是由最具体的选择器决定的。通过将我的第二个选择器更改为

input[type=text]

，它足够具体，可以在不使用

的情况下覆盖上一个选择器！重要信息

次要问题： 表中输入框的宽度还有第二个问题。我有两个影响输入宽度的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%

的选择器位于前一个选择器之后，因此它应该优先。但是，如果我取出

！重要信息

50%宽度覆盖

95%

！在CSS中，我认为对于冲突的样式，最后一个声明/选择的样式获胜？那为什么我还需要

！重要信息

因为我要应用的样式是最后一个？

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

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

这个！重要声明是与ID选择器的特定性战争的症状，可能会变成一团混乱。我鼓励您使用类而不是ID来防止这个问题

---

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

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

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

现在，转到上面的面板“计算样式”

---

去酒店；在这种情况下，宽度。按箭头展开，您将看到什么是有罪规则

我的答案被主持人删除，并转换为“评论”

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

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

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

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

---

继续执行“而不是邮政编码”。发布你的代码，其他人可能也有同样的问题。对我来说，使用IE9，标题中的列在其他to行被删除后保持其宽度。与James相同。我也在使用IE9Your table is Display有一个内联块显示它有一个表格。整个表格的宽度仅由这两个输入字段定义，如果它们不存在的话。桌子塌了，我修改了问题。如果你能再看一眼，我将不胜感激。此外，我已经在日期和详细信息列上设置了宽度，但它们仍然会折叠。这并没有告诉我为什么需要它，如果我不添加它，会应用什么样式。我已经更新了这个问题，更具体地询问“为什么”重要，当我想要的样式是最后一个被应用的样式时，它是必需的。关于最后一个样式的规则更多地是关于选择器内部的不同设置。当谈到选择器时，有一些规则会给你输入的每个选择器打分。通常是更具体的胜利。这是一种简单的方法（但并不精确），可以计算选择器在查看您指定的内容时的具体程度。表单输入[type=text]有3个，表格输入有2个。有没有确切的方法可以根据以不同方式选择同一对象的两个选择器来确定应用哪些样式？我能够移除！在指定表input为input[type=text]选择之后，这一点很重要，我想这已经足够具体了。谢谢你的解释！所以我应该提到这一点。我意识到去掉内联块是可行的。但随后表格也向下移动到“续费”标签下方。我指望内联样式使它们保持一致。如果我把显示改回块，我怎么能把续费标签和表格保持在同一行？这样使用浮动是“最佳实践”吗？如果我浮动那个标签，我会浮动其余的标签，使其一致。然后，我还必须浮动所有div（表示行），以便标签保持为一对一。