J'essaie de diviser une cellule TD (cellule de table) pour regarder comme si c'était deux cellules. Le problème est que lorsque la cellule augmente de hauteur, je ne peux pas faire les deux divs à l'intérieur pour occuper toute la hauteur disponible. Comme ces cellules peuvent pousser de manière dynamique, je ne peux pas définir une hauteur fixe (qui pourrait résoudre le problème).
Voici mon code: strong> p> <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0 }
#span1 { background-color: #DDD; width: 25px; float: right; }
#span2 { background-color: #EEE; width: 24px; float: left; }
.t { border-top: 1px solid black; }
.r { border-right: 1px solid black; height: 100%; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td><td>2</td><td>3<div><div id="span1" class="t">1</div><div id="span2" class="t r">1</div></div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 22 2 </td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td><div id="span1">3</div><div id="span2" class="r">3</div></td><td>4</td>
</tr>
<tr>
<td>1</td><td>2 2 2 2 2 2 2 2 </td><td><span style="line-height:2"><div id="span1">3</div><div id="span2" class="r">3</div></span></td><td>4</td>
</tr>
</tbody>
</table>
</body>
</html>
4 Réponses :
Essayez de régler
display:inline-block
Vous pouvez mettre une table à l'intérieur de cette cellule de table, puis cette table intérieure que vous pouvez faire ce que vous voulez, comme td colspan = "2" pour la rangée supérieure et TD TD pour la ligne inférieure (Cela me rappelle les jours laids de la disposition de la table, mais tout ce qui fonctionne pour vous!)
Je crois qu'il doit y avoir une meilleure façon de le faire ... mais merci de votre suggestion
Non, il a raison, vous aurez probablement besoin de supprimer tout le rembourrage / les marges dans la table qui passe à l'intérieur mais oui, cela sonne bien. Règle commune du pouce dans HTML = Les tables sont diaboliques et ne font jamais ce que vous voulez aussi, évitez si possible si possible. Prenez une solution que quelqu'un vous donne cela fonctionnera
Vous devez être réglé la hauteur TD Hauteur = 100%, et .span1 Set Hauteur = 100% puis essayez de ce que vous pouvez obtenir la réponse.
Je cherche également un moyen de diviser une TD (cellule de données de table). Après avoir lu de nombreux postes et après plusieurs tentatives infructueuses, je l'ai enfin craqué. Merci beaucoup à tous ceux qui ont affiché précédemment, comme c'est à votre avis que j'ai pu connecter les points.
Il y a deux choses que vous devez avoir à l'esprit, affectant la ligne d'en-tête et la ligne de données résultante. Ce que je veux dire par ceci, c'est que les cellules de la rangée supérieure [affectant la ligne d'en-tête] qui utilisent «Colspan» affectent directement les cellules de la rangée sous elles [ligne de données résultant]. Donc, par exemple, si ma ligne résultante (2e rangée) doit contenir des TDS Split, il est affecté par la ligne ci-dessus qui utilise «Colspan» dans son TDS (1ère rangée). Mais si la ligne suivante (3ème rangée) ne doit pas être affectée par le «colspan» à partir de la 1ère rangée, les cellules de la ligne suivante (3ème rangée) doivent avoir les mêmes attributs «Colspan» que les cellules de la 1ère rangée, cela empêche d'être divisé et les rend "étendues" l'écart régulier. p>
dans l'image [Cliquez sur le lien pour voir l'image], je n'ai que 2 colonnes [2e et 4ème colonnes] qui divisent les TDs sous eux. . Dans la 1ère rangée, j'utilise 'colspan' pour affecter les rangées ci-dessous. Cependant, je ne veux pas que les 2e et 3ème rangées se soient divisées, elles ont donc les mêmes «colspans» comme la 1ère rangée. Je tiens à scinder les cellules dans les 4ème et 5e rangées [dans les 2e et 4ème colonnes seulement, bien sûr], afin de l'accomplir, ils ne contiennent aucun attributs «Colspan», ce qui les rend affectés par les rangées au-dessus d'eux qui utilisent » Colspan '. La 6ème ligne n'est pas affectée par les «colspans» des lignes précédentes, car il contient les mêmes attributs «Colspan» que les 3 premières lignes. La 7ème et la dernière ligne contiennent des TDS divisées car il, comme des lignes 4 et 5, ne contient aucun «colspans». Cela peut sembler déroutant, mais si vous regardez l'image et essayez le code source, je pense que vous serez très heureux. J'espère que cela aide. P>
https: // www. flickr.com/photos/12121792@n02/sets/72157651047314439/ P>
<table border="1px solid" cellspacing="5" bordercolor="#000000" width="959" cellpadding="5">
<tr align="justify" valign="top">
<td valign="middle" bgcolor="#FFFFFF" width="210"><h4 style="color:#000000" align="center">Nothing Special Here</h4></td>
<td colspan="2" valign="middle" bgcolor="#6E7F8B"><h4 style="color:#FFFFFF" align="center">Colspan="2"</h4></td>
<td valign="middle" bgcolor="#6E7F8B" width="191"><h4 style="color:#FFFFFF" align="center">No Colspan Here</h4></td>
<td colspan="2" valign="middle" bgcolor="#6E7F8B"><h4 style="color:#FFFFFF" align="center">Colspan="2"</h4></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
<td width="191" valign="middle"><p align="center">No Colspan Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
<td width="191" valign="middle"><p align="center">No Colspan Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td width="129" valign="middle"><p align="center">Nothing Special</p></td>
<td width="120" valign="middle"><p align="center">Nothing Special</p></td>
<td width="191" valign="middle"><p align="center">Nothing Special</p></td>
<td width="99" valign="middle"><p align="center">Nothing Special</p></td>
<td width="101" valign="middle"><p align="center">Nothing Special</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td width="101" valign="middle"><p align="center">Nothing Special</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
<td valign="middle"><p align="center">No Colspan Here</p></td>
<td colspan="2" valign="middle"><p align="center">Colspan="2"</p></td>
</tr>
<tr class="gray1" valign="top" align="justify">
<td valign="middle"><p align="justify">Nothing Special Here</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
<td valign="middle"><p align="center">Nothing Special</p></td>
</tr>
</table>
Et répartir le TDS n'est pas une option? Ensuite, le "3" sur le dessus pourrait être dans un TD avec
colspan = "2" .Vous voulez dire, en utilisant Colspan et / ou Rowspan? Si tel est le cas, non, ce n'est pas une option. Bien que je puisse mettre ce que je veux dans les cellules (sans modifier le nombre de colonnes / rangées)