直通/删除整个HTML表格行
经过一番调查，我找不到这个问题的答案。 有这个，但它并没有真正回答我的问题。 我想在CSS中“删除”一个完整的HTML表格行，而不仅仅是其中的文本。 这是否可能？ 从我链接的例子来看，似乎tr风格甚至不能在Firefox中工作。 （无论如何，文本修饰只适用于文本afaik）
哦，是的，是的！
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>
我的回答（下面）说这是不可能的。 我错了，正如@NicoleMorganErickson所指出的那样。 请看看她的答案（并upvote它！）如何做到这一点。 简而言之，您可以:before伪类:before使用:before来创build一个在单元格中间绘制边框的元素：
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和语义表标记是不可能的。 正如@JMCCreativebuild议的那样，可以通过多种方式在视图上定位行。
相反，我会build议使用color ， background-color ， font-style:italic和/或text-decoration:line-through以使整行显然不同。 （我个人强烈地将文本淡出为比正常文本更接近背景的颜色，并使其斜体。）
最简单的方法是在tr及其后代单元格上使用background-image （或者简单地在这些单元格上使用透明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('linked/strike.png') 0 50% repeat-x; }
JS小提琴演示
tr { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg=='); background-repeat: repeat-x; background-position: 50% 50%; }
我喜欢Nicole Morgan Erickson的回答，但是如果你的解决scheme是逐字执行的话，可能会导致副作用 。 我已经添加了一些小的调整，以保持这个犹太教，下面…所以我们不全面修改每个表或每个td与此CSS 。
我也想要一个button排在行，但我不想用button敲出列，出于可见性的缘故。 我只是想排除其余的行。 为此，每一个想要展示罢工的专栏，都必须以一个阶级来标明。 在这个迭代中，您需要将表格标记为可触发的，并且将每个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中使用了这种方法，并将删除视为一件危险的事情，所以我将这些颜色格式化以适合我的使用。
@NicoleMorganErickson，我喜欢你的答案，但我不能让三振只影响应用的行。 此外，我需要它被应用多行，所以我把你的解决scheme修改成一个类。
CSS：
tr.strikeout td:before { content: " "; position: absolute; display: inline-block; padding: 5px 10px; left: 0; border-bottom: 1px solid #111; width: 100%; }
是的你可以。 在该行的第一个单元格中，创build一个包含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。
如何绝对定位在该行上方的<hr />元素。 根据静态或dynamic的需要，它可能是一个非常快速/简单的方法去或更难。
