web-dev-qa-db-fra.com

Split td en deux

J'essaie de scinder une TD (cellule de tableau) pour donner l'impression qu'il s'agit de deux cellules. Le problème est que lorsque la cellule grandit en hauteur, je ne peux pas faire en sorte que les deux divs occupent toute la hauteur disponible. Comme ces cellules peuvent se développer de manière dynamique, je ne peux pas non plus définir une hauteur fixe (cela pourrait résoudre le problème).

Voici mon code: 

<!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>

Voilà à quoi ça ressemble:

current table view

Je ne veux pas voir ces trous blancs dans la colonne 3.

Des idées pour résoudre ce problème? Je me suis battu avec CSS pendant un certain temps, sans succès jusqu'à présent ...

Merci!.

htmlcsshtml-table
11
Matías

vous devriez avoir la hauteur td height = 100%, et .span1 set height = 100% puis essayez, vous pouvez obtenir la réponse ..

<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; height:100%; }
  #span1 { background-color: #DDD; width: 25px; float: right; height:100%; }
  #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>
12
ram

Essayez de mettre

display:inline-block

peut également ou non avoir besoin d'ajouter de la hauteur à 100%.

Aussi, n'y a-t-il pas moyen d'ajouter simplement 2 td plutôt que d'essayer d'imiter 2 ??

2
Simon McLoughlin

vous pouvez placer un tableau à l'intérieur de cette cellule, puis faire ce que vous voulez, comme td colspan="2" pour la rangée du haut et td td pour la rangée du bas pour vous!)

0
Rodolfo

J'ai également cherché un moyen de fractionner une TD (cellule de données de table). Après avoir lu de nombreux articles et après plusieurs tentatives infructueuses, je l’ai finalement fait craquer. Un grand merci à tous ceux qui ont posté précédemment, car c’est à votre actif que j’ai pu relier les points.

Vous devez tenir compte de deux éléments, Affecting Header Row et Resulting Data Row. Ce que je veux dire par là, c'est que les cellules de la rangée supérieure [Affecting Header Row] qui utilisent 'colspan' affectent directement les cellules de la rangée située en dessous [Resulting Data Row]. Ainsi, par exemple, si ma ligne résultante (2e ligne) doit contenir des TD fractionnés, elle est affectée par la ligne au-dessus de laquelle le mot clé "colspan" est utilisé dans ses TD (1ère ligne). Mais si la rangée suivante (3ème rangée) ne doit pas être affectée par le "colspan" de la 1ère rangée, les cellules de la rangée suivante (3ème rangée) doivent avoir les mêmes attributs de "colspan" que les cellules de la 1ère rangée. de les séparer et les fait «couvrir» l’écart régulier.

Dans l'image [cliquez sur le lien pour voir l'image], je n'ai que 2 colonnes [2e et 4e colonnes] qui séparent les TD en dessous. Dans la 1ère ligne, j'utilise 'colspan' pour affecter les lignes ci-dessous. Cependant, je ne veux pas que les 2ème et 3ème rangées soient divisées, elles ont donc les mêmes «colspans» que la 1ère ligne. Je ne souhaite pas séparer les cellules des 4ème et 5ème lignes (uniquement dans les 2ème et 4ème colonnes, bien entendu). Pour ce faire, elles ne contiennent pas d'attribut 'colspan', ce qui les rend affectées par les lignes situées au-dessus qui les utilisent ' colspan '. La 6ème ligne n'est pas affectée par les 'colspans' des lignes précédentes, car elle contient les mêmes attributs 'colspan' que les 3 premières lignes. La 7ème et dernière ligne contient des TD fractionnés car, à l'instar des lignes 4 et 5, elle ne contient pas de «colspans». Cela peut paraître 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 ça aide.

https://www.flickr.com/photos/12121792@N02/sets/72157651047314439/

<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=&quot;2&quot;</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=&quot;2&quot;</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=&quot;2&quot;</p></td>
    <td width="191" valign="middle"><p align="center">No Colspan Here</p></td>
    <td colspan="2" valign="middle"><p align="center">Colspan=&quot;2&quot;</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=&quot;2&quot;</p></td>
    <td width="191" valign="middle"><p align="center">No Colspan Here</p></td>
    <td colspan="2" valign="middle"><p align="center">Colspan=&quot;2&quot;</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=&quot;2&quot;</p></td>
    <td valign="middle"><p align="center">No Colspan Here</p></td>
    <td colspan="2" valign="middle"><p align="center">Colspan=&quot;2&quot;</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>
0
Xylon Draganthus