HTML CSS добавление строки удаляет CSS

Question

У меня есть следующая проблема добавления строки в HTML-таблицу с указанным столбцом css, но когда строка добавлена, столбцы больше не используют css. Кто-нибудь знает, почему это происходит и как я могу обойти это? Код ниже.

<table class="Grid" style="width: 740px;">
<thead><tr><th class="cbx"><input type='checkbox'/></th><th class="DocType"><a href="/B/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', loadingElementId: 'AjaxIndicator', updateTargetId: 'Left', onSuccess: Function.createDelegate(this, AjaxSuccess) });">DT</a></th><th class="narrowColumn"><a href="/B/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', loadingElementId: 'AjaxIndicator', updateTargetId: 'Left', onSuccess: Function.createDelegate(this, AjaxSuccess) });">Pg</a></th><th class="narrowColumn"><a href="/B/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', loadingElementId: 'AjaxIndicator', updateTargetId: 'Left', onSuccess: Function.createDelegate(this, AjaxSuccess) });">V</a></th><th class="narrowColumn" id="sCol"><a href="/B/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', loadingElementId: 'AjaxIndicator', updateTargetId: 'Left', onSuccess: Function.createDelegate(this, AjaxSuccess) });">S</a></th><th class="srcInfo">SI</th></tr></thead>
<tr id="node" class="gridrow">
    <td class="cbx"><input class="cbxLeft" name="IDs" type="checkbox" value="4e420f8e-022a-4640-833e-e37bbdb6d856" /></td>
    <td class="DocType"><div style='float:left'><a class="" href="/B/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'GET', updateTargetId: 'Left', url: '/B/', onComplete: Function.createDelegate(this, Poll) });" target="_blank" title="">AA</a></div></td>
    <td class="narrowColumn">1</td>
    <td class="narrowColumn">1</td>
    <td class="narrowColumn">1</td>
    <td class="srcInfo"><a href="#" onclick="ShowHide('tr1');"><img alt="SI" src="Content/Images/ico_properties.gif" /></a></td>
</tr>
<tr id="tr1" style="display: none;">
    <td colspan="6" style="margin: 0px; padding: 0px;">
        <div style="float: left; width: 50%; margin: 0px; padding: 0px;">Capture Channel: Auto Synchronous Reassembly</div>
        <div style="float: left;  margin: 0px; padding: 0px;">Indexed By: SomeNetworkId</div>
    </td>
</tr>

    <script language="javascript" type="text/javascript">
function ShowHide(id) {
    var tr = document.getElementById(id);

    if (tr.style.display == "none") tr.style.display = "";
    else tr.style.display = "none";
}
</script>
<style type="text/css">
    .SourceInfo
    {
        width: 732px;background: red;
        border:none;
        border-style:none;
    }
th.cbx, td.cbx
{
    margin: 0;
    padding: 0;
    width: 13px !important;
    text-align: center;
    vertical-align: middle;
}

table.Grid .cbx input
{
    text-align: center;
    padding: 0;
}
table.Grid th.cbx input
{
    width: 13px;
    margin: -2px 0px -2px 0px;
}

table.Grid td.cbx input
{
    width: 15px;
    margin: -3px 0px -2px 0px;
}
td.DocType img
{
    margin-left:5px;
    border:none;
}
th.narrowColumn, td.narrowColumn
{
    width: 25px;
    text-align: center;
}
.gridrow
{
    background:#fff;
}
    </style>

извините, все это не может вписаться в код по какой-то причине.

спасибо за любую помощь, брюс

Answer 1

при добавлении строки столбцы больше не используют css

Если вы говорите о том, как изменяется ширина столбца в IE, когда вы показываете нижнюю строку (colspanned), этого следует ожидать.

Вы не указали ширину всех столбцов, поэтому в стандартном режиме «таблица-макет: авто» браузер будет угадывать, как распределить «запасную» ширину таблицы для каждого столбца. Это делается путем угадывания того, сколько контента имеется в каждом столбце на основе всех строк. Поэтому, когда вы добавляете дополнительную строку, которая имеет равное количество содержимого в каждом столбце (благодаря совместному использованию с colspan), усредненная ширина ячейки становится ближе к равенству, и все ширины столбца изменяются.

Если вам не нужно это поведение, установите для таблицы стиль «таблица-макет: исправлено». При фиксированной разметке только первая строка ячеек будет иметь какое-либо значение для ширины столбцов, и любые столбцы, которые вы оставите с неопределенными значениями ширины, будут одинаково распределять всю «лишнюю» ширину. Это, вероятно, то, что вы хотели. Браузер также быстрее рендерится и позволяет отключить стили в последующих строках, если вы используете их только для установки ширины.