HTML CSS ajoutant une ligne supprime css

Question

J'ai le problème suivant d'ajouter une ligne à une table html avec la colonne css spécifiée, mais quand une ligne est ajoutée, les colonnes n'utilisent plus le css. Est-ce que quelqu'un sait pourquoi cela se passe et comment je peux contourner cela? Le code est ci-dessous.

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

désolé tout cela ne pouvait pas tenir dans le code pour une raison quelconque.

Merci pour toute aide, bruce

Answer 1

lorsqu'une ligne est ajoutée les pas colonnes utilisent plus le css

Si vous parlez de la façon dont la largeur des colonnes changent dans IE lorsque vous afficher la ligne du bas (avec une colonne), c'est à prévoir.

Vous n'avez pas spécifié les largeurs de toutes les colonnes. Ainsi, dans le mode par défaut 'table-layout: auto', le navigateur va deviner comment distribuer les largeurs de table 'spare' à chaque colonne. Il le fait en devinant combien de contenu il y a dans chaque colonne, en fonction de toutes les lignes. Ainsi, lorsque vous ajoutez la ligne supplémentaire, qui a une quantité égale de contenu dans chaque colonne (en raison du partage avec un colspan), les largeurs de cellules moyennées se rapprochent de l'égalité et toutes les largeurs de colonnes changent.

Si vous ne souhaitez pas ce comportement, définissez le style "table-layout: fixed" sur la table. Avec la mise en page fixe, seule la première ligne de cellules fait une différence par rapport aux largeurs de colonne, et toutes les colonnes que vous laissez avec des largeurs non spécifiées partageront également toute la largeur 'de réserve'. C'est probablement ce que tu voulais. Le rendu est également plus rapide pour le navigateur et vous permet de laisser des styles sur les lignes suivantes si vous ne les utilisez que pour définir la largeur.