HTML CSS adding a row removes css

Question

Hi,

I have the following problem of adding a row to a html table with css column specified but when a row is added the columns no longer use the css. Does anyone know why this is happening and how I can get around this? The code is below.

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

sorry all of this couldn't fit in the code for some reason.

thanks for any help, bruce

Answer 1

when a row is added the columns no longer use the css

If you are talking about the way the column widths change in IE when you unhide the bottom (colspanned) row, this is to be expected.

You haven't specified the widths of all the columns, so in the default ‘table-layout: auto’ mode the browser will guess how to distribute the ‘spare’ table widths to each column. It does this by guessing at how much content there is in each column, based on all the rows. So when you add the extra row, which has an equal amount of content in every column (due to sharing with a colspan), the averaged cell widths get closer to equality and all the column widths change.

If you don't want this behaviour, set the style ‘table-layout: fixed’ on the table. With fixed layout, only the first row of cells makes any difference to the column widths, and any columns you leave with unspecified widths will share all the ‘spare’ width equally. This is probably what you wanted. It's also faster for the browser to render, and allows you to leave off styles on subsequent rows if you're only using them to set width.