Colspan HTML CSS

Question

Je suis en train de construire un tableau de deux rangs semblable aux éléments suivants :

où le fond vient combler l’espace de la rangée supérieure. Est ce possible en utilisant le CSS ?

Edit : comme j’avais peur de, il n’y a aucun moyen de le faire.

Answer 1

Je dois respectueusement en désaccord avec la réponse que colspan est exclusivement indicatif de la structure, et la notion implicite que tu ne devrais même pas essayer de résoudre votre problème de cette façon. Dire cela avec pas de place pour la contestation est, au pire, naïf, ou, au mieux, de mauvaise foi. Il n'est pas dans le service à la personne de poser la question.

Si vous avez une section d'une table que vous choisissez de s'étendre sur plusieurs colonnes pour l'apparence de bien, il n'est pas structurelle. C'est l'apparence. Et, malgré cela, il n'est pas simple, élégant, CSS analogique. C'est la réponse la plus honnête, et je dis cela comme un CSS ventilateur. CSS fait beaucoup de choses très, très bien. Les Tables ne sont pas parmi eux.

Qui peut ne pas être le populaire réponse, mais je crois que c'est l' honnête . La vérité est que la distinction entre la structure et la présentation n'est pas d'un blanc lumineux de la ligne, mais décidément floue. Je ne vais pas la prétention de vous dire à vos besoin pour faire un découpage de colonnes qui est bon ou mauvais. Les recherches sur cette question sera de retour une variété de solutions qui incluent un éventail de solutions de rechange, y compris le positionnement absolu, le dimensionnement, le long avec un variété similaire de navigateur et les circonstances spécifiques de mises en garde. Lire, et de prendre la meilleure décision éclairée, vous pouvez basée sur ce que vous trouvez.

Answer 2

Il n'y a pas de colspan en css pour autant que je sais, mais il y aura des column-span pour le multi colonne mise en page dans un avenir proche, mais depuis qu'il n'est qu'un projet en CSS3, vous pouvez l'enregistrer ici. De toute façon, vous pouvez faire une solution de contournement à l'aide de div et span avec forme de tableau d'affichage de ce genre.

Ce serait le code HTML:

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

Et ce serait le css:

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

La seule raison d'utiliser cette astuce pour gagner l'avantage d' table-layout comportement, je l'utilise beaucoup, si seulement paramètre div et span largeur à certain pourcentage n'ai pas de répondre à notre exigence de conception.

Mais si vous n'avez pas besoin de bénéficier de l' table-layout de comportement, alors durilai réponse vous conviendrait assez.

Answer 3

<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>

Answer 4

Qui ne fait pas partie de la compétence du CSS. ``décrit la structure du contenu de la page, ou donne un sens aux données dans la table, ce qui est travail de HTML.

Answer 5

Vous pourriez essayer en utilisant un système de grille comme http://960.gs/

Votre code serait quelque chose comme ceci, en supposant que vous utilisez une disposition « 12 colonnes » :