Linethrough/barré toute une ligne de tableau HTML
Après quelques recherches, je ne trouve pas de réponse à cette question. Il n'y a cette mais il n'a pas vraiment répondu à ma question. Je voudrais "barré" d'un tableau HTML ligne dans le CSS, pas seulement le texte qu'il contient. Est-il possible? À partir de l'exemple que j'ai lié, il semble tr style ne fonctionne même pas dans Firefox. (Et de toute façon, le texte de décoration s'applique uniquement sur le texte, autant que je sache)
- J'ai essayé de style tr et/ou td avec text-decoration: line-through;, mais comme indiqué, il affecte seulement le texte.
- Que devez-vous vérifier si un ou plusieurs cellules dans la ligne de texte qui s'enroule sur plusieurs lignes?
- Le contenu de la table ne sera jamais étendre au-delà d'une ligne.
Vous devez vous connecter pour publier un commentaire.
Oh oui, oui, il est!
CSS:
HTML:
http://codepen.io/nericksx/pen/CKjbe
#111
de la couleur que vous voulez.Ma réponse (ci-dessous) a dit qu'il n'est pas possible. J'ai eu tort, comme l'a souligné @NicoleMorganErickson. Veuillez voir sa réponse (et upvote il!) pour savoir comment faire. En bref, vous utilisez
:before
pseudo-classe pour créer un élément qui trace une frontière entre le milieu de la cellule, au-dessus du contenu:(réponse originale à cette question)
Non, il n'est pas possible en utilisant uniquement CSS et votre sémantique de balisage de tableau. Comme @JMCCreative l'indique, il est possible visuellement à l'aide de n'importe quel nombre de façons de positionner une ligne au-dessus de votre ligne.
Je voudrais plutôt vous suggérons d'utiliser une combinaison de
color
,background-color
,font-style:italic
et/outext-decoration:line-through
à faire la totalité de la ligne évidemment différents. (Je serais personnellement fortement 'fade out' le texte d'une couleur beaucoup plus proche de l'arrière-plan de texte normal et faire en italique.)La façon la plus simple serait d'utiliser un
background-image
sur letr
et son descendant des cellules (ou tout simplement utiliser un transparentbackground-color
sur ces cellules).html:
css:
JS Fiddle démo
J'ai utilisé http://www.patternify.com/ pour générer le 1x1 url de l'image.
J'aime Nicole Morgan Erickson réponse, mais il pourrait causer des effets secondaires si votre œuvre sa solution de verbatim. J'ai ajouter quelques petites astuces pour garder cette casher, ci-dessous... alors que nous ne sommes pas globalement la modification de chaque tableau ou chaque td avec ce css.
Je voulais aussi un bouton sur la ligne de grève de la ligne, mais je ne voulais pas de grève de la colonne avec le bouton, pour la visibilité du saké. Je voulais juste grève le reste de la ligne. Pour cela, j'ai fait en sorte que chaque colonne, qui veut être capable de montrer la grève doit le déclarer par également être marqué avec une classe. Dans cette itération, vous avez besoin de marque de la table que la grève-mesure, et aussi la marque de chaque td que la grève-mesure; mais le gain de sécurité par le pas de côté de procéder au non-grève-mesure de tables, et vous gagnez en contrôle de colonnes à frapper.
CSS:
Utilisation:
Enfin, depuis que je suis en utilisant ce avec Bootstrap, et de traiter les suppressions comme une chose dangereuse à faire, j'ai formaté les couleurs un peu pour correspondre à mon utilisation.
@NicoleMorganErickson, j'aime bien votre réponse, mais je ne pouvais pas obtenir le barré pour n'affecter que les appliqué à la ligne. Aussi, j'en avais besoin pour être appliqués plusieurs lignes donc j'ai modifié votre solution vers le bas en une seule classe.
CSS:
http://codepen.io/anon/pen/AaFpu
Oui, vous pouvez. Dans la première cellule de la ligne vous créer un div contenant des ressources humaines. Flotteur de la div à gauche et à préciser sa largeur en % de son contenant de l'élément, dans ce cas, la cellule du tableau. Il va s'étirer aussi large que vous le souhaitez à travers la table cellules de la ligne, même au-delà de la largeur de la table si vous le souhaitez.
Cela fonctionne pour moi:
De contrôler la largeur de votre ligne, vous devez spécifier la largeur de la cellule du tableau contenant les RH. Pour le style de RH éléments de ils disent que vous ne devriez pas le faire à moins de 3px en hauteur.
Comment sur absolument le positionnement d'un
<hr />
élément overtop de la ligne. Selon la façon statique ou dynamique que cela doit être, il pourrait être extrêmement rapide/moyen facile d'aller ou beaucoup plus difficile.