convertir un tableau en div - css

Question

Voici mon tableau et comment le convertir en divs.

<table class="style1">
            <tr>
                <td class="style2">Name</td>
                <td class="style5">John Doe</td>
                <td>error</td>
            </tr>
            <tr>
                <td class="style2">
                    Desc</td>
                <td class="style5">
                    Desc....</td>
            </tr>
            <tr>
                <td class="style3">
                    Start Date</td>
                <td class="style4">
                    date here</td>
                    <td>start date error here</td>
            </tr>
            <tr>
                <td class="style2">
                    End Date</td>
                <td class="style5">
                    end date here....</td>
                    <td>end date error..</td>
            </tr>
          </table>

Answer 1

CSS permet de simuler facilement des tableaux avec des éléments de bloc en utilisant l'élément display propriété.

HTML :

<div class="table style1">
    <div class="tr">
        <div class="td style2">
            Name
        </div>
        <div class="td style5">
            John Doe
        </div>
        <div class="td">
            error
        </div>
    </div>
    <div class="tr">
        <div class="td style2">
            Desc
        </div>
        <div class="td style5">
            Desc....
        </div>
        <div class="td style5">
            Desc....
        </div>
    </div>
    <div class="tr">
        <div class="td style3">
            Start Date
        </div>
        <div class="td style4">
            date here
        </div>
        <div class="td">
            start date error here
        </div>
    </div>
    <div class="tr">
        <div class="td style2">
            End Date
        </div>
        <div class="td style5">
            end date here....
        </div>
        <div class="td">
            end date error..
        </div>
    </div>
</div>

CSS :

.table {
    display:table;
}
.tr {
    display:table-row;
}
.td {
    display:table-cell;
}

Answer 2

Si vous affichez des données de ce type, il est préférable d'utiliser un tableau. <div> sont plus recommandés que les tableaux pour une mise en page plus générale, mais dans ce cas, il faudrait appliquer du css dans chaque fichier <div> au lieu d'utiliser le simple <table> , <tr> et <td> pour maintenir le style.

Answer 3

<style>
   .style2{
float:left;    
}
.clr{
clear:both;
}
</style>

<div class="style1">
            <div class="clr">
                <div class="style2">Name</div>
                <div class="style5">John Doe</div>
            </div>
            <div class="clr">
                <div class="style2">
                    Desc</div>
                <div class="style5">
                    Desc....</div>
            </div>
            <div class="clr">
                <div class="style2">
                    Start Date</div>
                <div class="style4">
                    date here</div>
                    <div>start date error here</div>
            </div>
            <div class="clr">
                <div class="style2">
                    End Date</div>
                <div class="style5">
                    end date here....</div>
                    <div>end date error..</div>
            </div>
  </div>

J'espère que cela vous aidera.

Answer 4

Sémantiquement parlant, vos données sont tabulaires, ce qui signifie qu'une <table> est préférable à un <div> . <div> seraient utilisés pour la structure générique. Mais vous devez toujours vous efforcer d'obtenir un code sémantique.

par exemple, si le contenu est un paragraphe, alors utilisez <p> . Si vous avez une liste, alors utilisez une liste - non ordonnée ou ordonnée, etc.

Answer 5

Je sais qu'il s'agit d'un vieux fil de discussion, mais j'ai atterri ici et d'autres personnes peuvent aussi passer par là. J'ai utilisé la technique d'AlienWebGuy pour remplacer un tableau par <div>' est stylisé à l'aide de la propriété display. Cette opération a permis de résoudre un problème d'alignement vertical exaspérant que j'avais avec un tableau qui contenait <td> qui contiennent à leur tour un nombre différent de lignes.