web-dev-qa-db-fra.com

Traversée / barrage d'une ligne de tableau HTML entière

Après quelques recherches, je n'ai pas trouvé de réponse à cette question. Il y avait ceci mais cela n'a pas vraiment répondu à ma question. Je voudrais "barrer" une ligne complète de tableau HTML en CSS, pas seulement le texte qu'il contient. Est-ce que c'est possible? D'après l'exemple que j'ai lié, il semble que le style tr ne fonctionne même pas dans Firefox. (Et de toute façon, la décoration de texte ne s'applique que sur le texte afaik)

htmlcsshtml-tablerowstrikethrough
52
Mathieu M-Gosselin

Oh oui, c'est ça!

CSS:

table {
    border-collapse: collapse;
}

td {
    position: relative;
    padding: 5px 10px;
}

tr.strikeout td:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 1px solid #111;
    width: 100%;
}

HTML:

<table>
    <tr>
        <td>Stuff</td>
        <td>Stuff</td>
        <td>Stuff</td>
    </tr>
    <tr class="strikeout">
        <td>Stuff</td>
        <td>Stuff</td>
        <td>Stuff</td>
    </tr>
    <tr>
        <td>Stuff</td>
        <td>Stuff</td>
        <td>Stuff</td>
    </tr>
</table>

http://codepen.io/nericksx/pen/CKjbe

90
crinkledMap

Ma réponse (ci-dessous) a dit que ce n'est pas possible. J'avais tort, comme l'a souligné @NicoleMorganErickson. Veuillez voir sa réponse (et voter positivement!) Pour savoir comment le faire. En bref, vous utilisez :before pseudo-classe pour créer un élément qui dessine une bordure au milieu de la cellule, au-dessus du contenu:

table           { border-collapse:collapse } /* Ensure no space between cells   */
tr.strikeout td { position:relative        } /* Setup a new coordinate system   */
tr.strikeout td:before {                     /* Create a new element that       */
  content: " ";                              /* …has no text content            */
  position: absolute;                        /* …is absolutely positioned       */
  left: 0; top: 50%; width: 100%;            /* …with the top across the middle */
  border-bottom: 1px solid #000;             /* …and with a border on the top   */
}

(réponse originale)

Non, il n'est pas possible d'utiliser uniquement CSS et votre balisage de table sémantique. Comme le suggère @JMCCreative, il est possible visuellement d'utiliser un certain nombre de façons de positionner une ligne sur votre ligne.

Je suggère plutôt d'utiliser une combinaison de color, background-color, font-style:italic et/ou text-decoration:line-through pour rendre la ligne entière évidemment différente. (Personnellement, je `` fondre '' fortement le texte en une couleur beaucoup plus proche de l'arrière-plan que le texte normal et le mettre en italique.)

37
Phrogz

Le moyen le plus simple serait d'utiliser un background-image sur le tr et ses cellules descendantes (ou utilisez simplement un transparent background-color sur ces cellules).

html:

<table>
    <thead>
        <tr>
            <th>Col One</th>
            <th>Col Two</th>
            <th>Col Three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First row, One-One</td>
            <td>First row, One-Two</td>
            <td>First row, One-Three</td>
        </tr>
        <tr class="empty">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

css:

table {
    empty-cells: show;
}
th, td {
    width: 6em;
    height: 2em;
    line-height: 2em;
    border: 1px solid #ccc;
}
tr.empty,
tr.empty td {
    background: transparent url('http://davidrhysthomas.co.uk/linked/strike.png') 0 50% repeat-x;
}

JS Fiddle

11
David Thomas
tr {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
    background-repeat: repeat-x;
    background-position: 50% 50%;
}

J'ai utilisé http://www.patternify.com/ pour générer l'url de l'image 1x1.

10
Semiaddict

J'aime la réponse de Nicole Morgan Erickson, mais cela pourrait provoquer des effets secondaires si vous implémentez sa solution textuellement. J'ai ajouté quelques petits ajustements pour garder ce casher, ci-dessous ... afin que nous ne soyons pas modifiant globalement chaque table ou chaque td avec ce css.

Je voulais aussi un bouton sur la ligne pour rayer la ligne, mais je ne voulais pas rayer la colonne avec le bouton, par souci de visibilité. Je voulais juste rayer le reste du rang. Pour cela, j'ai fait en sorte que chaque colonne qui veut être capable de montrer la radiation soit déclarée en étant également marquée d'une classe. Dans cette itération, vous devez marquer la table comme pouvant être frappée, et également marquer chaque td comme pouvant être frappé; mais vous gagnez en sécurité en n'effectuant pas latéralement les tables non frappables, et vous gagnez contrôle des colonnes à supprimer.

CSS:

table.strike-able {
    border-collapse: collapse;
}

table.strike-able tr td {
    position: relative;
    padding: 3px 2px;
}

table.strike-able tr th {
    position: relative;
    padding: 3px 2px;
}

table.strike-able tr.strikeout td.strike-able:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 2px solid #d9534f;
    width: 100%;
}

tilisation:

<table class="strike-able" id="Medications" data-item-count="@Model.Medications.Count">
<tr>
    <th>
        Some Column
    </th>
    <th>
        Command Column
    </th>
</tr>
<tr class="strikeout">
    <td class="strike-able"></td>
    <td>Button that Toggles Striking Goes Here (active)</td>
</tr>
<tr>
    <td class="strike-able"></td>
    <td>Button that Toggles Striking Goes Here</td>
</tr>
</table>

Enfin, puisque j'utilise ceci avec Bootstrap et que je considère les suppressions comme une chose dangereuse à faire, j'ai formaté les couleurs un peu pour qu'elles correspondent à mon utilisation.

8
Greg

@NicoleMorganErickson, j'aime votre réponse, mais je n'ai pas réussi à faire en sorte que la suppression n'affecte que la ligne appliquée. De plus, j'avais besoin qu'il soit appliqué sur plusieurs lignes, j'ai donc modifié votre solution en une seule classe.

CSS:

tr.strikeout td:before {  
  content: " ";  
  position: absolute;  
  display: inline-block;  
  padding: 5px 10px;  
  left: 0;  
  border-bottom: 1px solid #111;  
  width: 100%;  
}

http://codepen.io/anon/pen/AaFp

3
Revoman

Oui, vous pouvez. Dans la première cellule de la ligne, vous créez un div contenant un HR. Faites flotter le div vers la gauche et spécifiez sa largeur en% de son élément conteneur, dans ce cas la cellule du tableau. Il s'étendra aussi large que vous le souhaitez à travers les cellules du tableau de cette ligne, même au-delà de la largeur du tableau si vous le souhaitez.

Cela fonctionne pour moi:

<style>
.strikeThrough {
height:3px;
color:#ff0000;
background-color:#ff0000;
}
.strikeThroughDiv {
float:left;
    width:920%;
    position:relative;
    top:18px;
border:none;
}
</style>
<table width="900" border="1" cellspacing="0" cellpadding="4">
   <tr  valign="bottom">
    <td>
    <div class="strikeThroughDiv"><hr  class="strikeThrough"/></div>
    One
    </td>
    <td>    
        <label for="one"></label>
        <input type="text" name="one" id="one" />
    </td>
    <td>
    <label for="list"></label>
      <select name="list" id="list">
        <option value="One">1</option>
        <option value="Two">2</option>
        <option value="Three" selected>3</option>
      </select>
    </td>
    <td>
      Four
    </td>
    <td>
      Five
    </td>
  </tr>
</table>

Pour contrôler la largeur de votre ligne, vous devez spécifier la largeur de la cellule du tableau contenant le HR. Pour coiffer les éléments HR, ils disent que vous ne devriez pas faire moins de 3 pixels de hauteur.

1
Eamonn Gormley

Que diriez-vous de positionner absolument un <hr /> élément au-dessus de la ligne. Selon la façon dont cela doit être statique ou dynamique, cela pourrait être un moyen extrêmement rapide/facile à parcourir ou beaucoup plus difficile.

0
JakeParis