logo标签列表

划掉/删除整个HTML表格行

htmlcsshtml-tablerowstrikethrough
67

经过一些调查，我没有找到这个问题的答案。有这个但它并没有真正回答我的问题。我想在CSS中"删除"整个HTML表格行，而不仅仅是其中的文本。这是否可能？从我链接的示例中，似乎tr样式甚至在Firefox浏览器中也不起作用。(无论如何，text-decoration只适用于文本)

1
我尝试使用text-decoration: line-through;为tr和/或td设置样式，但正如所述，它只影响文本。 - Mathieu M-Gosselin
如果一行中的一个或多个单元格有文本换行成多行，你应该看到什么？ - Phrogz
表格内容永远不会超过一行。 - Mathieu M-Gosselin
9个回答
116

是的，没错！

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

我会编辑给出的解决方案，使CSS仅应用于具有类似strike-able的表格。您的代码可能会影响修改其他表格。我将添加一个解决方案来帮助解释。 - Greg
有没有办法获取红色的那一行？谢谢！ - Stefan Müller
请注意，列出的代码与链接中的代码不同。我认为链接更为更新。@StefanMüller 将 #111 更改为您想要的颜色。 - dbinott
38

我的回答（以下内容）说这是不可能的。我错了，正如@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的组合使整行明显地不同于其他行。(我个人会将文本“淡化”，使其变成比普通文本更接近背景的颜色，并加粗倾斜)
14
tr {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
    background-repeat: repeat-x;
    background-position: 50% 50%;
}

我使用http://www.patternify.com/生成1x1像素的图片链接。

9

编辑

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

    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的答案，但是如果您完全实现他的解决方案可能会导致副作用。我进行了一些小的调整以确保这个问题不出错，如下所示... 这样我们就不会在每个表或每个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并将删除视为一件危险的事情，因此我对颜色进行了一些格式化以匹配我的使用。
非常棒，谢谢你的回答。您的使用情况与我的完全相同，包括使用Bootstrap。我们正在使用jQuery的DataTables插件，您的答案似乎可以完美地配合它（包括排序）。 - Paul
这个能在 asp:GridView 渲染的表格中工作吗？ - user3393933
8

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

会不会把线放在内容后面呢？也许你觉得它们颜色相同了？ - Mathieu M-Gosselin
嗯...说得好。我编辑了我的答案以反映这一点。它仍然适用于我的目的！ :) - gaw89
2

@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

1
这可能已经有些过时了，但我需要这样做，这个答案是最好的；其他答案会引起副作用，或者没有足够的"划掉"。谢谢。 - warath-coder
0

是的，你可以这样做。在你创建的行的第一个单元格中，创建一个包含 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。

-1
这是一个非常简单的方法，对我很有效：
<table>
<tbody style="text-decoration: line-through">
-- Various table body stuff
</tbody> </table>
这会使整个表格被划掉，而不是行。 - The Godfather
-1

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

@Ben Slade的答案是所有答案中最接近的，但还是...

只需在您的CSS中使用text-decoration: line-through！添加相应的类，然后使用<tr class="strikethrough">！

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

不幸的是，这只会划掉文本，而不是整个表格行。（跨越边界） - Mathieu M-Gosselin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接