WN - Visa ett inlägg - Tabell med DIV-taggar i stället?

Conny Westh · 2011-05-05, 12:16

Har testat en del idéer men inte fått 100% kläm på hur jag ska åstadkomma en tabell med raka kolumner men där kolumnbredden anpassas (för alla rader) till den rad med det bredaste innehållet i just den kolumnen.

Utseendet ska vara som en vanlig <table> i html men var abyggt med <div>-taggar.

Mitt arbete hittils:

CSS-filen (test_tabell.css):

Kod:

div.table
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;
}

div.table_header
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;
}

div.table_body
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;
}

div.table_column
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
}


div.table_row
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;
}

div.table_cell
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
}

div.table_footer
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
    width:98%;

}

div.table_footer_column
{
    border-style:dashed;
    border-width:thin;
    border-color:red;
    color:Lime;
    float:left;
}

HTML-filen (test_tabell.html):

Kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <link rel="stylesheet" type="text/css" href="test_tabell.css" media="all"/>
    <title>Test</title>
</head>
<body>

<h1>Testsida för tabell med DIV-taggar</h1>
<p>Nedan är ett test på hur man skapar en tabell med hjälp av DIV-taggar. Just nu så är inte kolumnerna inte särskilt snyggt uppställda, men test pågår.</p>


<div class="table">Tabell För kunder
    <div class="table_header">
        <div class="table_column">
            Kundnuummer
        </div>
        <div class="table_column">
            Förnamn
        </div>
        <div class="table_column">
            Efternamn
        </div>
    </div>
    <div class="table_body">
        <div class="table_row">
            <div class="table_cell">
                1
            </div>
            <div class="table_cell">
                Kalle
            </div>
            <div class="table_cell">
                Svensson
            </div>
        </div>
    </div>


        <div class="table_row">
            <div class="table_cell">
                2
            </div>
            <div class="table_cell">
                Olle
            </div>
            <div class="table_cell">
                Gustavsson
            </div>
        </div>


        <div class="table_row">
            <div class="table_cell">
                3
            </div>
            <div class="table_cell">
                David
            </div>
            <div class="table_cell">
                Holgersson
            </div>
        </div>


    <div class="table_footer">
        <div class="table_footer_column">
            Fot 1
        </div>
        <div class="table_footer_column">
            Fot 2
        </div>
        <div class="table_footer_column">
            Fot 3
        </div>
    </div>
</div>



</body>
</html>