Databases
StackOverflow2013
Postsdbo
POTable Represented as Divs not Displaying
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTable Represented as Divs not Displaying
    text
    copied!<p>I am new to web programming and my first draft of a web page I am working on had tables within a table. As I did more reading I discovered that it is better style to render the outer table as a div and nest the tables in cells of the outer div. However, as soon as I switched my table tags to divs everything stopped displaying. I'm sure I am missing something obvious. Here is the code:</p> <p>CSS:</p> <pre><code>.Dashboard { display: table; table-layout: fixed; height: 500px; width: 500px; } .col { display: table-column; } .cell1 { display: table-cell; border: 1px solid black; } .cell2 { display: table-cell; border: 1px solid black; } .cell3 { display: table-cell; border: 1px solid black; } .cell4 { display: table-cell; border: 1px solid black; } table.inner, td { border-collapse: collapse; border: 2px solid black; text-align: center; padding: 2px; } td.image { padding: 0; margin: 0; } </code></pre> <p>HTML:</p> <pre><code>&lt;form id="form1" runat="server"&gt; &lt;asp:Label runat="server" ID="label"&gt;&lt;/asp:Label&gt; &lt;div runat="server" id="Dashboard" class="Dashboard"&gt; &lt;div class="col"&gt; &lt;div class="cell1"&gt; &lt;table class="inner" id="t1"&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;&lt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="cell2"&gt; &lt;table class="inner" id="t2"&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="col"&gt; &lt;div class="cell3"&gt; &lt;table class="inner" id="t3"&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div class="cell4"&gt; &lt;table class="inner" id="t4"&gt; &lt;tr&gt;...&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>I realize all the cells are the same at the moment but that will change -- hence the four different css specifications.</p> <p>Any advice is appreciated.</p> <p>Regards.</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