CSS Hell simulant TABLE avec DIV
Im essayant de simuler une table en utilisant uniquement CSS et DIV. Le problème est que rien de ce que je fais peut parfaitement simuler une disposition de table de comportement.
Ci-dessous le tableau de mise en page que je veux, et immédiatement au-dessous de celui-ci, ce que j'ai pu réaliser avec CSS/DIV:
Mise en page avec Table/CSS et Table/CSS http://i53.tinypic.com/2ujjk0w.jpg
Html/CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Teste</title>
<style type="text/css">
table{
table-layout:fixed;
width: 333px;
border-width: 1px;
border-spacing: 2px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th, table td
{
border-width: 1px;
padding: 1px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
table th.column1, table td.column1{
width:60px;
background-color:#CCD9FF;
}
table th.column2, table td.column2{
width:100px;
background-color:#ECFFE5;
}
table th.column3, table td.column3{
width:60px;
background-color:#FFEBE5;
}
table th.column4, table td.column4{
width:100px;
background-color: #FFFFCC;
}
div#tablecontainer
{
width: 328px;
}
div.tablecontainerrow
{
clear:both;
}
div#tablecontainer div div.column1
{
width: 60px;
float:left;
border: 1px solid black;
background-color:#CCD9FF;
}
div#tablecontainer div div.column2
{
width: 100px;
float:left;
border: 1px solid black;
background-color:#ECFFE5;
}
div#tablecontainer div div.column3
{
width: 60px;
float:left;
border: 1px solid black;
background-color:#FFEBE5;
}
div#tablecontainer div div.column4
{
width: 100px;
float:left;
border: 1px solid black;
background-color:#FFFFCC;
}
</style>
</head>
<body>
<h1>CSS and TABLE</h1>
<table>
<tr>
<th class="column1">Header 1</th>
<th class="column2">Header 2</th>
<th class="column3">Header 3</th>
<th class="column4">Header 4</th>
</tr>
<tr>
<td class="column1">line 1 column 1</td>
<td class="column2">line 1 column 2</td>
<td class="column3">line 1 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 2 column 1</td>
<td class="column2">line 2 column 2</td>
<td class="column3">line 2 column 3</td>
<td class="column4">line 2 column 4</td>
</tr>
<tr>
<td class="column1">line 3 column 1</td>
<td class="column2">line 3 column 2</td>
<td class="column3">line 3 column 3 (more content)</td>
<td class="column4">line 3 column 4</td>
</tr>
</table>
<h1>CSS and DIV</h1>
<div id="tablecontainer">
<div class="tablecontainerrow">
<div class="column1">Header 1</div>
<div class="column2">Header 2</div>
<div class="column3">Header 3</div>
<div class="column4">Header 4</div>
<div class="clear" />
</div>
<div class="tablecontainerrow">
<div class="column1">line 1 column 1</div>
<div class="column2">line 1 column 2</div>
<div class="column3">line 1 column 3</div>
<div class="column4">line 1 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 2 column 1</div>
<div class="column2">line 2 column 2</div>
<div class="column3">line 2 column 3</div>
<div class="column4">line 2 column 4</div>
</div>
<div class="tablecontainerrow">
<div class="column1">line 3 column 1</div>
<div class="column2">line 3 column 2</div>
<div class="column3">line 3 column 3 (more content)</div>
<div class="column4">line 3 column 4</div>
</div>
</div>
</body>
</html>Ce que je pourrais modifier pour permettre à la CSS/DIV disposition ressemble CSS/Table?
Quelques informations complémentaires
- Pensez à cela comme un exercice (un défi). Merci donc de ne pas me fournir des réponses en disant: l'utilisation d'un tableau est une meilleure solution pour cette situation.
- En fait, Im me demandais une solution qui peut changer complètement la présentation tabulaire des données à un autre simplement en modifiant le CSS. Dans ce cas, l'utilisation de
<table>est hors de question.- Je veux compatibilité avec IE 7+, FF3+, Chrome 4+.
Merci!
source d'informationauteur outlookrperson
Vous devez vous connecter pour publier un commentaire.
À l'aide de tableaux de mise en pages n'est pas très professionnel, mais à l'aide de tableaux pour afficher des tables est parfaitement ok - c'est pour ce qu'ils devraient être utilisés. L'émulation de tables à l'aide des balises div et de css est de prendre css layouting trop loin.
C'est un horrible réponse, je ne peux pas croire que je suis à même de le proposer, MAIS, si vous sont enfer plié sur la réalisation d'un tableau de divs...
C'est seulement suggéré si vous DEVEZ faire un tableau avec les divs
Il est peu connu des propriétés d'affichage CSS pour vous aider à ce sujet, lire ici: table-cell css.
Encore une fois, il suffit d'utiliser un tableau, si vous le pouvez.
Si vous êtes à présenter des données tabulaires (plusieurs attributs de plusieurs entités similaires, aka tabulaire de données), l'utilisation d'un
<table>tagSûr, je pense que la plupart des navigateurs actuels gérer cela, sauf pour MSIE...
Autant que je sache, le seul moyen de contourner ce problème est de définir explicitement la hauteur de votre "colonnes", sinon les divs par défaut height:auto, et ne sera aussi grand que le contenu. Réglage de la hauteur peut être dangereux si vous avez du contenu qui nécessite plus d'espace que la hauteur le permet.
Super ennuyeux problème, juste venu au travail. J'ai l'habitude d'utiliser un arrière-plan pour résoudre ce problème, mais depuis que tout doit être réactif maintenant il est gênant pour faire des images pour chaque Requête de Média. C'est la seule fois que j'allais utiliser JavaScript pour atteindre ce que je veux. Stupide qu'il n'est pas pris en charge.
HTML:
JavaScript:
CSS:
http://jsfiddle.net/kXrn5/6/
Voici ma tentative. Ce n'est probablement pas parfait, mais c'est un début. Pour moi, C'est de travailler sur le nouveau google Chrome, Firefox, Safari, Opera, IE10, et
IE9. Désolé, je n'ai pas IE7 pour le test. Je doute que cela fonctionne, que IE7 a été difficile de traiter avec.
http://jsfiddle.net/nluis3294/uLuof882/
Je pense que nous convenons tous que vous devez utiliser les tables de données tabulaires, et les divs pour les non-données tabulaires. Dans un monde idéal, je pense que c'est ce que tout le monde le ferait.
Cependant, c'est aussi ok pour dire que je veux que mon non-tableaux de données pour être aligné dans une grille et que les lignes et les colonnes devrait s'étirer comme un tableau html. C'est un choix de conception, et c'est totalement légitime. C'est là que le problème réside. Vous pouvez utiliser des tableaux, qui sont beaucoup plus facile, mais techniquement faux. Ou, vous pouvez utiliser des divs, et doivent compter sur des trucs comme images d'arrière-plan, et fausse les colonnes, et les entretoises pour l'obtenir à regarder comme des tableaux.
À l'aide de faux colonnes ne semble pas "correct" pour moi. Si vous souhaitez modifier la largeur d'une colonne, vous devez modifier l'image d'arrière-plan. Et à l'aide d'une image d'arrière-plan pour définir la couleur d'arrière-plan semble bizarre pour moi. J'ai des réserves similaires sur d'autres trucs comme Pseudo colonnes, ou des astuces sur des marges négatives. Dans mon oppinion, il faut juste modifier le css pour permettre un moyen simple d'obtenir quelque chose qui ressemble à une grille sans astuces.
CSS: