直线/删除整个HTML表格行

Question

经过一番研究,我找不到这个问题的答案.有这个,但它没有真正回答我的问题.我想在CSS中"删除"一个完整的HTML表行,而不仅仅是其中的文本.它可能吗？从我链接的示例来看,似乎tr样式甚至在Firefox中都不起作用.(无论如何,文字装饰仅适用于文本afaik)

Answer 1

哦,是的,是的!

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

我的回答(下面)说这是不可能的.我错了,正如@NicoleMorganErickson指出的那样.请查看她的回答(并提出建议!)了解如何做到这一点.简而言之,您使用:before伪类来创建一个元素,该元素在内容上方的单元格中间绘制边框:

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

(原始答案)

不,只能使用CSS和语义表标记.正如@JMCCreative建议的那样,可以通过任意数量的方式直观地在您的行上定位一条线.

我反而建议使用的组合color,background-color,font-style:italic和/或text-decoration:line-through使整个排明显不同.(我个人强烈地将文本淡出'颜色比正常文本更接近背景,并使其变为斜体.)

Answer 3

最简单的方法是使用background-imageon tr及其后代单元格(或简单地background-color在这些单元格上使用透明).

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小提琴演示

Answer 4

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

我使用http://www.patternify.com/生成1x1图像网址.

Answer 5

我喜欢Nicole Morgan Erickson的回答,但如果你逐字逐句地实施他的解决方案,它可能会引起副作用.我添加了一些小的调整来保持这个犹太人,低于......所以我们不是用这个css全局修改每个表或每个td.

我还想在行上有一个按钮来击出行,但为了能见,我不想用按钮击出列.我只想打破剩下的一行.为此,我做了这样的事情,以便每个想要能够显示罢工的列必须通过标记类来声明. 在此迭代中,您需要将表标记为可攻击,并将每个td标记为可攻击; 但是你不会因为不影响任何不可打击的牌桌而获得安全感,并且你可以控制要击出哪些列.

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

用法:

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

最后,由于我在Bootstrap中使用它,并将删除视为危险的事情,我已经将颜色格式化了一点以符合我的用途.

Answer 6

编辑：正如@Mathieu M-Gosselin 在评论中指出的那样，这实际上是将这条线放在文本后面。 也就是说，如果您的线条与文本颜色相同，或者您使用的是小字体，这仍然可以很好地工作。

值得一提的是，这里有一种非常有效的方法可以在纯 CSS 中实现，而无需使用伪元素。您可以通过调整 来更改删除线的粗细background-size。

table {
  border-collapse: collapse;
}

td {
  width: 100px
}

.strikethrough {
  background: repeating-linear-gradient(
    180deg,
    red 0%,
    red 100%
  );
  background-size: 100% 2px;
  background-position: center;
  background-repeat: no-repeat;
}

<table>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Baz</td>
  </tr>
  <tr class="strikethrough">
    <td>Foo Strike</td>
    <td>Bar Strike</td>
    <td>Baz Strike</td>
  </tr>
</table>