клетки не сохраняют ширину ⇐ Jquery

[Anonymous]

Примечание: эти проблемы возникают только в Firefox или Chrome. Т.е., по-видимому, не имеет такой же проблемы. < /P>

Код: Выделить всё

$('#remove_renewal').click(function() {
var next = $('.selected').next('tr');
$('.selected').remove();
if (next.length === 0) {
$('#renewals tbody tr').last().click();
} else {
next.click();
}
});< /code>
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;
}< /code>


Renewals:




Date
Details







 

Add
Remove

< /code>
< /div>
< /div>
< /p>
Моя проблема заключается в таблице «обновления:». Я позволяю пользователю добавлять и удалять строки в таблицу. По умолчанию два тестовых ряда загружаются при загрузке страницы. Если вы удалите их обоих, внезапно столбцы таблицы больше не уважают их свойства ширины. Поскольку столбцы  

являются единственными, оставшимися, я предполагаю, что они не чтятся моей настройки ширины. Как я могу получить их в честь ширины, даже когда строки не существует? Я неправильно понял селекторы CSS как перезаписывающие друг друга на основе последнего в файле CSS. Видимо, стили определяются селектором, который является самым специфическим. Изменив мой второй селектор на вход [type = text] он был достаточно конкретным, чтобы переопределить предыдущий без использования! У меня есть два селектора CSS, влияющих на ширину ввода: < /p>

Код: Выделить всё

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%, поступает после предыдущего, так что он должен иметь приоритет. Однако, если я выхожу! В CSS я думал, что для противоречивых стилей последний объявил/выбрал победы? Так зачем мне все еще нужно! Важно , так как стиль, который я хочу применять, последний?


Подробнее здесь: https://stackoverflow.com/questions/145 ... ping-width