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

如果你在谈论当取消隐藏底部（colspanned）行时IE中列宽变化的方式，这是可以预期的。

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

如果您不想要此行为，请在表格上设置“table-layout：fixed”样式。使用固定布局时，只有第一行单元格对列宽有任何差异，而任何以未指定宽度离开的列将均等地共享所有“备用”宽度。这可能就是你想要的。浏览器渲染速度也更快，并允许您在后续行中留下样式，如果您只是使用它们来设置宽度。

添加行的HTML CSS删除了css

1 个答案: