整个 HTML 表格行的穿线/删除线

Question

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

Answer 1

不确定，但似乎还有其他答案提到了简单直接的纯 CSS 解决方案...

@Ben Slade 的答案是最接近的，但仍然...

只需使用 text-decoration: line-through在你的 CSS 中！添加相应的类，然后使用！

.strikethrough {
  text-decoration: line-through;
}

table,
th,
td {
  border: 1px solid black;
}

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr class="strikethrough">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

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

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

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

Answer 4

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

无论如何，这是一种非常有效的方法，可以在纯 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>

Answer 5

编辑

在最近的 Bootstrap 4.3 ServiceNow Angular.js 项目中，我发现自己必须进行一些更改，而是使用了以下 CSS，类似于 Revoman 的体验：

    tr.strikeout td.strike-able:before {
          content: " ";  
          position: absolute;  
          display: inline-block;  
          padding: 12px 10px;  
          left: 0;  
          border-bottom: 2px solid #d9534f;  
          width: 100%;          
    }

---

原始帖子

我喜欢 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

@NicoleMorganErickson，我喜欢你的答案，但我无法让删除线仅影响应用的行。另外，我需要将它应用到多行，因此我将您的解决方案修改为单个类。

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

是的，你可以。在该行的第一个单元格中创建一个包含 HR 的 div。将 div 向左浮动，并将其宽度指定为其包含元素（在本例中为表格单元格）的 %。它将在该行中的表格单元格上拉伸到您想要的宽度，如果您愿意，甚至可以超出表格的宽度。

这对我有用：

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

要控制线条的宽度，您必须指定包含 HR 的表格单元格的宽度。对于 HR 元素的样式，他们说您不应使其高度小于 3 像素。

Answer 8

这是一个对我有用的非常简单的方法：

<table>
<tbody style="text-decoration: line-through">
-- Various table body stuff
</tbody> </table>

Answer 9

哦，是的，是的！

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