添加一行的HTML CSS删除了css

Question

我有以下问题向指定了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> 

<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）行，这是可以预料的。

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

如果您不想要这种行为，请在表格上设置样式'table-layout：fixed'。使用固定布局时，只有第一行单元格会对列宽产生任何影响，并且任何以非指定宽度离开的列都将平等地共享所有“备用”宽度。这可能是你想要的。浏览器渲染速度也会更快，并且如果仅使用它们来设置宽度，则允许您在后续行上放弃样式。