Question

经过一番研究，我找不到这个问题的答案。有this但它并没有真正回答我的问题。我想在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-image及其后代单元格上使用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 Fiddle demo

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的回答，但如果您逐字实施他的解决方案，它可能导致副作用。我添加了一些小调整来保持这个犹太洁食，低于......所以我们不会全局修改每个表格或每个td用这个css 。

我还想在行上有一个按钮来划出行，但为了能见，我还是不想用按钮击出列。我只想打破剩下的一行。为此，我做了这样的事情，以便每个想要能够显示罢工的列必须通过标记类来声明。在此次迭代中，您需要将表标记为可攻击，并将每个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

编辑：正如@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>

Answer 8

是的，你可以。在该行的第一个单元格中，您将创建一个包含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元素，他们说你不应该低于3px的高度。

Answer 9

如何将<hr />元素绝对定位在行的上方。根据静态或动态的需要，它可能是一种非常快速/简单的方法，也可能更难。

直通/删除整个HTML表格行

9 个答案:

HTML：

的CSS：