Databases
StackOverflow2013
Postsdbo
POHTML CSS adding a row removes css
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML CSS adding a row removes css
    text
    copied!<p>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.</p> <pre><code>&lt;table class="Grid" style="width: 740px;"&gt; &lt;thead&gt;&lt;tr&gt;&lt;th class="cbx"&gt;&lt;input type='checkbox'/&gt;&lt;/th&gt;&lt;th class="DocType"&gt;&lt;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) });"&gt;DT&lt;/a&gt;&lt;/th&gt;&lt;th class="narrowColumn"&gt;&lt;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) });"&gt;Pg&lt;/a&gt;&lt;/th&gt;&lt;th class="narrowColumn"&gt;&lt;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) });"&gt;V&lt;/a&gt;&lt;/th&gt;&lt;th class="narrowColumn" id="sCol"&gt;&lt;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) });"&gt;S&lt;/a&gt;&lt;/th&gt;&lt;th class="srcInfo"&gt;SI&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt; &lt;tr id="node" class="gridrow"&gt; &lt;td class="cbx"&gt;&lt;input class="cbxLeft" name="IDs" type="checkbox" value="4e420f8e-022a-4640-833e-e37bbdb6d856" /&gt;&lt;/td&gt; &lt;td class="DocType"&gt;&lt;div style='float:left'&gt;&lt;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=""&gt;AA&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td class="narrowColumn"&gt;1&lt;/td&gt; &lt;td class="narrowColumn"&gt;1&lt;/td&gt; &lt;td class="narrowColumn"&gt;1&lt;/td&gt; &lt;td class="srcInfo"&gt;&lt;a href="#" onclick="ShowHide('tr1');"&gt;&lt;img alt="SI" src="Content/Images/ico_properties.gif" /&gt;&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="tr1" style="display: none;"&gt; &lt;td colspan="6" style="margin: 0px; padding: 0px;"&gt; &lt;div style="float: left; width: 50%; margin: 0px; padding: 0px;"&gt;Capture Channel: Auto Synchronous Reassembly&lt;/div&gt; &lt;div style="float: left; margin: 0px; padding: 0px;"&gt;Indexed By: SomeNetworkId&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; </code></pre> <p></p> <pre><code> &lt;script language="javascript" type="text/javascript"&gt; function ShowHide(id) { var tr = document.getElementById(id); if (tr.style.display == "none") tr.style.display = ""; else tr.style.display = "none"; } &lt;/script&gt; &lt;style type="text/css"&gt; .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; } &lt;/style&gt; </code></pre> <p>sorry all of this couldn't fit in the code for some reason.</p> <p>thanks for any help, bruce</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload