Fatal编程技术网
  • html/
  • 行通过/删除整个HTML表格行

行通过/删除整个HTML表格行

html css

行通过/删除整个HTML表格行,html,css,html-table,row,strikethrough,Html,Css,Html Table,Row,Strikethrough,经过一些研究，我找不到这个问题的答案。有，但它并没有真正回答我的问题。我想用CSS“删除”一个完整的HTML表格行，而不仅仅是其中的文本。有可能吗？从我链接的示例来看，tr样式在Firefox中似乎都不起作用。（无论如何，文本装饰只适用于文本afaik）将元素绝对定位在行的上方如何。根据需要的静态或动态程度，这可能是一种非常快速/简单的方式，也可能是更难的方式。我的回答（下面）说这是不可能的。正如@NicoleMorganErickson所指出的，我错了。请查看她的答案（并投票！）了解如何做到这

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

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

我的回答（下面）说这是不可能的。正如@NicoleMorganErickson所指出的，我错了。请查看她的答案（并投票！）了解如何做到这一点。简而言之，您可以使用
：before
伪类创建一个元素，该元素在内容上方的单元格中间绘制边框：

表{边框折叠：折叠}/*确保单元格之间没有空格*/
tr.strikeout td{position:relative}/*设置一个新的坐标系*/
tr.strikeout td:before{/*创建一个*/
内容：“；/*…没有文本内容*/
位置：绝对；/*…处于绝对位置*/
左：0；顶部：50%；宽度：100%；/*…顶部穿过中间*/
底部边框：1px实心#000；/*…顶部带有边框*/
}
（原答覆）

不，仅使用CSS和语义表标记是不可能的。正如@JMCCreative所建议的，可以使用任意数量的方式在您的行上直观地定位一条线

相反，我建议使用
颜色
、
背景色
、
字体样式：斜体
和/或
文本装饰：线条通过
组合，使整行明显不同。（我个人强烈地将文本“淡出”到比普通文本更接近背景的颜色，并使其倾斜。）

最简单的方法是在
tr
及其子代单元格上使用
背景图像（或者在这些单元格上使用透明的
背景颜色）

html:

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




删除线{
高度：3倍；
颜色：#ff0000；
背景色：#ff0000；
}
罢工者{
浮动：左；
宽度：920%；
位置：相对位置；
顶部：18px；
边界：无；
}


一个
1.
2.
3.
四
五


要控制行的宽度，必须指定包含HR的表格单元格的宽度。对于HR元素的造型，他们说你不应该让它的高度低于3倍


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


我曾经生成1x1图像url。
哦，是的，是的

CSS:

HTML:



东西
东西
东西
东西
东西
东西
东西
东西
东西



@NicoleMorganErickson，我喜欢你的答案，但我不能让三振只影响应用的行。另外，我需要将它应用于多行，所以我将您的解决方案修改为单个类

CSS:


编辑2020年3月2日：


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


原始帖子：


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>


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


用法：


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>




某专栏
命令列
切换打击的按钮转到此处（激活）
这里有一个按钮，用来切换罢工



最后，由于我将此应用于引导，并将删除视为一件危险的事情，因此我对颜色进行了一些格式化，使其与我的用途相匹配。
编辑：正如@Mathieu m-Gosselin在评论中指出的，这实际上是在文本后面添加了一行内容。也就是说，如果您的行与文本的颜色相同，或者您使用的是小字体，这仍然非常有效

值得一提的是，这里有一种非常有效的方法，可以在纯CSS中实现，而不必使用伪元素。您可以通过调整背景大小来更改删除线的厚度



表格{
边界塌陷：塌陷；
}
运输署{
宽度：100px
}
删除线{
背景：重复线性渐变(
180度，
红色0%，
红色100%
);
背景尺寸：100%2px；
巴克