Table Represented as Divs not Displaying

Question

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:

CSS:

.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;
}

HTML:

<form id="form1" runat="server">
<asp:Label runat="server" ID="label"></asp:Label>
<div runat="server" id="Dashboard" class="Dashboard">
    <div class="col">
        <div class="cell1">
            <table class="inner" id="t1">
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr><...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
            </table>
        </div>
        <div class="cell2">
            <table class="inner" id="t2">
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
            </table>
        </div>
    </div>
    <div class="col">
        <div class="cell3">
            <table class="inner" id="t3">
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
                <tr>...</tr>
            </table>
        </div>
        <div class="cell4">
            <table class="inner" id="t4">
                <tr>...</tr>
            </table>
        </div>
    </div>
</div>
</form>
</body>
</html>

I realize all the cells are the same at the moment but that will change -- hence the four different CSS specifications.

Any advice is appreciated.

Don't put div's and tables inside a form! – paddotk Jun 18 '12 at 13:47 — paddotk, Jun 18 '12 at 13:47

score 0 · Answer 1 · answered Jun 18 '12 at 13:47

0

Good practice is to use table less HTML for mark-up unless you actually have tabular data to display. Tables are for Tabular data! .However, In your case the issue is with display: CSS property. If you put display:block; instead of table-cell etc, the layout starts to appear on your page. So I'd recommend in having a look at W3schools

answered Jun 18 '12 at 13:47

Dev

781
9
29

Thanks. The tables really are tabular data so I need them. But they are all different sizes so they did not display well wrapped in an outer table. Btw, changing table-cell to block did not make the tables reappear. – Kevin Jun 18 '12 at 13:49
@Diodeus - That's one way of looking at it!! :-) – Dev Jun 18 '12 at 13:52

Ann B. G. · Accepted Answer · 2012-06-18T14:44:32.543

0

Only mistake from your code is that you're using display:table-column for .col, try removing that or changing it to table-cell or table-row and your code should work.

edited Jun 18 '12 at 14:44

answered Jun 18 '12 at 14:03

Ann B. G.

304
2
6

Well, you are correct that this makes the table reappear -- all jumbled up. But the attribute table-column is definitely available in the code completion provided by Visual Web Developer. – Kevin Jun 18 '12 at 14:14
The "table-column" display type means it acts like the tag in HTML - i.e. an invisible element whose width* governs the width of the corresponding physical column of the enclosing table. See the [W3C standard](http://www.w3.org/TR/CSS21/tables.html) for more information about the CSS table model. see also http://stackoverflow.com/questions/7617418/how-is-a-css-display-table-column-supposed-to-work – Ann B. G. Jun 18 '12 at 14:27
See examples of nested divs using different display types here: http://www.quirksmode.org/css/display.html @AnnB. you are correct that it does not display anything, only used for styling information like `` does. – Dexter Huinda Jun 18 '12 at 14:44

Table Represented as Divs not Displaying

2 Answers2