Durchschleif / gestrichener eine ganze HTML-Tabellenzeile

Question

Nach einigen Recherchen konnte ich keine Antwort auf diese Frage finden. Es gab diese aber es hat wirklich meine Frage nicht beantwortet. Ich möchte „durchgestrichener“ eine komplette HTML-Tabellenzeile in CSS, nicht nur den Text in ihm. Ist es überhaupt möglich? Aus dem Beispiel, dass ich verbunden sind, so scheint es, tr Styling Arbeit in Firefox nicht einmal der Fall ist. (Und überhaupt, text-decoration gilt nur auf Text afaik)

Answer 1

Oh ja, ja es ist!

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

Answer 2

Meine Antwort (unten) sagte, dass es nicht möglich ist. Ich war falsch, wie @NicoleMorganErickson hingewiesen. Bitte beachten Sie ihre Antwort (und upvote es!), wie es zu tun. Kurz gesagt, verwenden Sie :before Pseudo-Klasse ein Element zu erstellen, die eine Grenze in der Mitte der Zelle zieht, über den Inhalt:

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   */
}    

---

(original Antwort)

Nein, ist es nicht nur möglich, CSS und Ihre semantische Tabellen-Markup verwenden. Wie @JMCCreative schon sagt, ist es möglich, visuell mit einer beliebigen Anzahl von Möglichkeiten, um eine Linie über Ihre Zeile zu positionieren.

Ich würde stattdessen vorschlagen, eine Kombination aus color verwenden, background-color, font-style:italic und / oder text-decoration:line-through die gesamte Reihe offensichtlich anders zu machen. (Ich würde persönlich stark ‚fade out‘ den Text in eine Farbe viel näher an den Hintergrund als normaler Text und kursiv.)

Answer 3

Der einfachste Weg, um einen background-image auf dem tr und seine Nachkommen Zellen zu verwenden wäre (oder einfach eine transparente background-color auf diesen Zellen verwendet werden).

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 Demo

Answer 4

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

Ich benutzen http://www.patternify.com/ die 1x1 Bild-URL zu generieren.

Answer 5

ich wie Nicole Morgan Erickson Antwort, aber es könnte Ursache Nebenwirkungen , wenn Ihr seine Lösung wörtlich umzusetzen. Ich habe ein paar kleine Verbesserungen hinzufügen, um diesen koscher zu halten, unten ... so dass wir nicht global jede Tabelle oder jedes td mit diesem css modifiziert .

Ich wollte auch einen Knopf auf der Zeile, um die Zeile zu streichen, aber ich wollte nicht die Spalte mit der Taste streichen, für die Sichtbarkeit willen. Ich wollte nur den Rest der Zeile streichen. Dazu habe ich es so, dass jede Spalte, die zeigen, den Streik aus der Lage sein will auch so erklären, muss mit einer Klasse gekennzeichnet werden. In dieser Iteration, müssen Sie die Tabelle als Schlagen der Lage zu markieren, und markieren Sie auch jede td als Streik kann; aber sie Sicherheit gewinnen, indem sie nicht die Seite alle nicht-strike-able Tabellen zu bewirken, und Sie die Kontrolle gewinnen, von denen Spalten aus schlagen.

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%;
}

Verwendung:

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

Schließlich, da ich verwende diese mit Bootstrap und Behandlung der Löschungen als gefährliche Sache zu tun, ich habe die Farben ein wenig formatiert meine Verwendung entsprechen.

Answer 6

@NicoleMorganErickson, wie ich Ihre Antwort, aber ich konnte das Ausstreichen nur die angelegte Reihe beeinflussen nicht erhalten. Auch ich musste es mehrere Zeilen angewendet werden, so dass ich Ihre Lösung modifiziert nach unten in einer einzigen Klasse.

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/AaFpu

Answer 7

Ja, Sie können. In der ersten Zelle der Zeile erstellen Sie ein div einen HR enthält. Schwimmer den div nach links und gibt ihre Breite als% seines enthaltenden Elements, in diesem Fall die Tabellenzelle. Es wird so breit strecken, wie Sie in dieser Zeile über die Tabellenzellen wollen, auch über die Breite des Tisches, wenn Sie wollen.

Dies funktioniert für mich:

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

Um die Breite der Linie steuern Sie die Breite der Tabellenzelle angeben, haben den HR enthält. HR-Elemente für das Styling sie sagen, man sollte es nicht machen weniger als 3px in der Höhe.

Answer 8

Wie wäre es absolut Positionieren eines <hr /> Element overtop der Reihe. Je nachdem, wie statisch oder dynamisch diese Bedürfnisse sein, könnte es eine extrem schnelle / einfache Art und Weise schwieriger zu gehen oder viel.