HTML CSS添加一行将删除CSS

我遇到以下问题：在指定了css列的html表中添加一行，但添加一行后，列不再使用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>

硅
1.
1.
1.
捕获通道：自动同步重新组装
索引人：SomeNetworkId

函数ShowHide（id）{
var tr=document.getElementById（id）；
如果（tr.style.display==“无”）tr.style.display=“”；
else tr.style.display=“无”；
}
.SourceInfo
{
宽度：732px；背景：红色；
边界：无；
边框样式：无；
}
th.cbx，td.cbx
{
保证金：0；
填充：0；
宽度：13px！重要；
文本对齐：居中；
垂直对齐：中间对齐；
}
表.Grid.cbx输入
{
文本对齐：居中；
填充：0；
}
表.网格th.cbx输入
{
宽度：13px；
保证金：-2px0px-2px0px；
}
表.Grid td.cbx输入
{
宽度：15px；
利润：-3px0px-2px0px；
}
td.DocType img
{
左边距：5px；
边界：无；
}
th.窄列，td.窄列
{
宽度：25px；
文本对齐：居中；
}
格里德罗先生
{
背景：#fff；
}

很抱歉，由于某些原因，所有这些都无法放入代码中

谢谢你的帮助， 布鲁斯

添加行时，列不再使用css

如果您讨论的是IE中取消隐藏底部（Colspan）行时列宽的变化方式，这是意料之中的

您尚未指定所有列的宽度，因此在默认的“表格布局：自动”模式下，浏览器将猜测如何将“备用”表格宽度分配给每一列。它通过基于所有行猜测每列中有多少内容来实现这一点。因此，当您添加额外的行时（由于与colspan共享），每列中的内容量相等，平均单元格宽度将更接近相等，并且所有列宽都会发生变化

如果不希望出现这种行为，请在表上设置样式“table layout:fixed”。使用固定布局时，只有第一行单元格对列宽有任何影响，任何未指定宽度的列将平等共享所有“备用”宽度。这可能是你想要的。浏览器渲染的速度也更快，并且如果您仅使用样式来设置宽度，则可以在后续行中保留样式

    <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>