Utilisation de CSS pour créer des cellules de tableau d'une largeur spécifique sans le retour à la ligne

Question

Dans un projet, j'ai eu besoin de restituer des tableaux avec des colonnes d'une largeur spécifique avec une seule ligne HTML par ligne de tableau (sans retour à la ligne). J'ai besoin que chaque cellule de tableau ait un remplissage de 1 pixel en haut et en bas et de 2 pixels à gauche et à droite. Le meilleur moyen que je puisse trouver avec qui fonctionne le navigateur croisé est de mettre un div à l'intérieur d'un td à l'intérieur du tableau de la manière suivante:

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

J'aimerais pouvoir éliminer le besoin d’ajouter un extra div. J'ai passé de nombreuses heures à googler ce problème, mais je ne trouve pas d'alternative.

Existe-t-il un moyen de faire ce dont j'ai besoin sans avoir besoin d'ajouter un extra div? Si oui, de quoi s'agit-il?

Existe-t-il un moyen d'obtenir le résultat souhaité sans utiliser de tables?

Answer 1

Malheureusement, les éléments de table ne respectent pas le débordement. Vous devrez donc l'appliquer à un élément enfant.

modifier: j'ai peut-être parlé trop tôt, car je peux créer cet effet dans FF avec max-width et j'ai découvert cette chose qui pourrait fonctionner pour IE. Vous apprenez quelque chose tous les jours.

edit2: Oui, cela fonctionne au moins pour IE7, mais il y a une mise en garde sérieuse selon laquelle vous ne pouvez pas avoir d'espaces dans le texte, ils doivent être convertis en  . Je pense que vous devriez probablement vous en tenir à la <div> solution pour des raisons de propreté et de compatibilité.

Answer 2

En fait, vous pouvez .

Normalement, la table occupe la place dont elle a besoin. Si vous attribuez à table une largeur de 100%, il faudra 100% de la valeur avec et partager entre les cellules en ce qui concerne leur contenu .

Il n'y a pas d'espace libre dans un tableau: à un moment donné, une cellule doit occuper l'espace restant une fois la taille des autres définie.

Pour définir la largeur d'une cellule, vous devez lui attribuer un width et un max-width de même taille . Pour un tableau à N colonnes, vous pouvez utiliser N-1 colonnes. La dernière colonne occupera l'espace restant.

Si vous faites cela sur N-2 colonnes, les deux colonnes qui n'ont pas de corrigé partagent le même espace.

Ayant tout cela, vous pouvez ajouter white-space:no-wrap et / ou text-overflow:ellipsis si vous le souhaitez.

Voici un exemple d'image (mon lecteur RSS) & nbsp ;: https: / /i.stack.imgur.com/bppKP.png

Et un exemple concret: https://codepen.io/lehollandaisvolant/pen/ REVNLy? Editors = 1100

Vous pouvez voir que & # 8217; est en fait incroyablement puissant. Dans le codepen, vous pouvez voir:

• certaines cellules ont une largeur fixe
• certaines cellules s’adaptent au texte qu’elle contient
• certaines cellules correspondent au conteneur

Et vous pouvez décider du comportement de chaque cellule (tant qu'il y a une cellule qui s'adapte au conteneur)

Answer 3

Vous ne devriez pas avoir besoin d'imbriquer un div dans chaque cellule du tableau. Ce qui suit devrait avoir le même effet.

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>

Answer 4

Vous pouvez également simplement remplacer tableau par div.

Ensuite, vous devez définir la largeur de la colonne en CSS (ce qui peut être délicat pour pouvoir fonctionner avec tous les navigateurs).

Exemple: votre code ressemblerait alors à ceci:

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>