Comment créer un tableau uniquement à l'aide de la balise <div> et de Css

Question

Comment créer un tableau uniquement à l'aide de la balise <div> et de Css

Demandé el 16 de Juin, 2010: Quand la question a-t-elle été
220481 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Fermé: Situation réelle de la question

Je veux créer une table uniquement en utilisant <div> et CSS.

Voici ma table d'échantillons.

<body>
  <form id="form1">
      <div class="divTable">
             <div class="headRow">
                <div class="divCell" align="center">Customer ID</div>
                <div  class="divCell">Customer Name</div>
                <div  class="divCell">Customer Address</div>
             </div>
            <div class="divRow">
                  <div class="divCell">001</div>
                <div class="divCell">002</div>
                <div class="divCell">003</div>
            </div>
            <div class="divRow">
                <div class="divCell">xxx</div>
                <div class="divCell">yyy</div>
                <div class="divCell">www</div>
           </div>
            <div class="divRow">
                <div class="divCell">ttt</div>
                <div class="divCell">uuu</div>
                <div class="divCell">Mkkk</div>
           </div>

      </div>
  </form>
</body>

Et le style :

<style type="text/css">
    .divTable
    {
        display:  table;
        width:auto;
        background-color:#eee;
        border:1px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
    }

    .divRow
    {
       display:table-row;
       width:auto;
    }

    .divCell
    {
        float:left;/*fix for  buggy browsers*/
        display:table-column;
        width:200px;
        background-color:#ccc;
    }
</style>

Mais cette table ne fonctionne pas avec IE7 et les versions inférieures. S'il vous plaît donner votre solution et des idées pour moi. Merci.

Demandé el 16 de Juin, 2010 par Kumara

0 votes

Jeter un coup d'œil à cet article

Commenté el 16 de Juin, 2010 par tanathos

32 votes

Pourquoi voulez-vous utiliser div pour créer un tableau ?

Commenté el 16 de Juin, 2010 par huy

0 votes

Vérifiez ceci lien s'il vous plaît, cela peut être une bonne aide

Commenté el 16 de Juin, 2010 par Sohail

Afficher 9 autres commentaires

Answer 1

5 Réponses

Answer 2

283voto

Shiva Komuravelly Points 1355

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

Snippet exécutable :

.div-table {
  display: table;         
  width: auto;         
  background-color: #eee;         
  border: 1px solid #666666;         
  border-spacing: 5px; /* cellspacing:poor IE support for  this */
}
.div-table-row {
  display: table-row;
  width: auto;
  clear: both;
}
.div-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;         
  width: 200px;         
  background-color: #ccc;  
}

<body>
  <form id="form1">
      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Customer ID</div>
                <div  class="div-table-col">Customer Name</div>
                <div  class="div-table-col">Customer Address</div>
             </div>
            <div class="div-table-row">
                  <div class="div-table-col">001</div>
                <div class="div-table-col">002</div>
                <div class="div-table-col">003</div>
            </div>
            <div class="div-table-row">
                <div class="div-table-col">xxx</div>
                <div class="div-table-col">yyy</div>
                <div class="div-table-col">www</div>
           </div>
            <div class="div-table-row">
                <div class="div-table-col">ttt</div>
                <div class="div-table-col">uuu</div>
                <div class="div-table-col">Mkkk</div>
           </div>

      </div>
  </form>
</body>

Répondu el 12 de Juillet, 2011 par Shiva Komuravelly (1355 Points )

235 votes

Merci ! Quelqu'un qui a vraiment répondu à sa question et qui ne s'est pas contenté de dire "c'est une idée stupide". Je déteste quand les gens ne répondent pas aux questions... S'il l'a posée, il faut y répondre

Commenté el 5 de Mai, 2012 par stumpx

25 votes

@stumpx : Parfois la bonne réponse est "ne faites pas ça". C'est l'une de ces fois. Lorsque vous devez demander "comment faire un tableau en utilisant des divs et des CSS", vous avez deux problèmes : soit vous posez la mauvaise question, soit vous essayez de faire la mauvaise chose.

Commenté el 22 de Juin, 2012 par cHao

30 votes

@cHao Si vous pensez que la réponse doit être celle-là, alors ignorez-la et laissez quelqu'un qui veut vraiment répondre à la question y répondre.

Commenté el 22 de Juin, 2012 par stumpx

Afficher 33 autres commentaires

Answer 3

91voto

Kobi Points 65357

div ne doivent pas être utilisés pour les données tabulaires. C'est tout aussi incorrect que d'utiliser des tableaux pour la mise en page.
Utilisez un <table> . C'est facile, sémantiquement correct, et vous aurez terminé en 5 minutes.

Répondu el 16 de Juin, 2010 par Kobi (65357 Points )

10 votes

Cela peut toutefois dépendre de l'application. Parfois, ce qui semble être un tableau peut être linéaire, bien que divisé. Par exemple, les calendriers peuvent avoir leurs avantages en tant que divs au lieu de tableaux.

Commenté el 16 de Juin, 2010 par Dann

2 votes

@Dann : Ils pourraient avoir des avantages en tant que liste mais un ensemble de divs est sémantiquement aussi mauvais qu'un tableau de mise en page.

Commenté el 22 de Juin, 2012 par cHao

4 votes

Il y a plusieurs raisons pour lesquelles nous demandons que les tables soient séparées par des DIV's. L'une d'entre elles est que l'utilisation de la balise table dans SharePoint 2007 perturbe tout le contenu de la page.

Commenté el 15 de Octobre, 2012 par Shiva Komuravelly

Afficher 14 autres commentaires

Answer 4

9voto

oezi Points 27038

Si vous faites exactement le même balisage qu'avec un tableau, pourquoi n'utilisez-vous pas un tableau ? je m'embrouille avec tout ça display:table-column; , display:table; et ainsi de suite est juste insensé.

Répondu el 16 de Juin, 2010 par oezi (27038 Points )

Answer 5

4voto

Ula Karzelek Points 435

S'il y a quelque chose dans <table> que vous n'aimez pas, vous pourriez peut-être utiliser réinitialiser le fichier ?

ou

Si vous en avez besoin pour la mise en page, consultez le site Web de la Commission européenne. Exemples de mise en page cssplay pour la conception de sites Web sans tableaux.

Répondu el 16 de Juin, 2010 par Ula Karzelek (435 Points )

Answer 6

3voto

huy Points 954

Pourquoi voulez-vous utiliser div pour créer un tableau ?

Vous pouvez toutefois essayer d'utiliser le cadre de travail Blueprint ( http://www.blueprintcss.org/ ). C'est un cadre de grille. Vous devriez pouvoir obtenir ce dont vous avez besoin.

Répondu el 16 de Juin, 2010 par huy (954 Points )

Comment créer un tableau uniquement à l'aide de la balise <div> et de Css

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment créer un tableau uniquement à l'aide de la balise <div> et de Css

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: