62

いくつかの調査の後、この質問に対する答えを見つけることができませんでした。これがありましたが、私の質問には本当に答えませんでした。テキストだけでなく、CSS で完全な HTML テーブル行を「取り消し線」にしたいと思います。それはまったく可能ですか？リンクした例から、tr スタイリングは Firefox でも機能しないようです。（とにかく、テキスト装飾はテキストにのみ適用されます）

4

9 に答える 9

109

ええ、そうです！

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

于 2013-10-29T23:05:44.670 に答える
39

私の答え（以下）は、それは不可能だと言いました。@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、行全体を明らかに異なるものにすることをお勧めします。(個人的には、テキストを通常のテキストよりも背景に近い色に強く「フェードアウト」し、斜体にします。)

于 2011-01-06T20:38:14.600 に答える
11

最も簡単な方法は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 フィドルのデモ

于 2011-01-06T20:39:43.720 に答える
9

2020 年 2 月 3 日編集:

最近のブートストラップ 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 の回答は気に入っていますが、彼のソリューションを逐語的に実装すると、副作用が発生する可能性があります。このコーシャを維持するために、いくつかの小さな調整を以下に追加しました...これにより、この 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 で使用しており、削除を危険なこととして扱っているため、使用に合わせて色を少しフォーマットしました。

于 2015-07-22T21:40:12.143 に答える
3

@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

于 2014-05-14T21:35:51.740 に答える
1

はい、できます。行の最初のセルで、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 未満にするべきではないと彼らは言います。

于 2011-07-15T01:00:39.430 に答える
0

<hr />行の上に要素を絶対に配置するのはどうですか。これがどの程度静的であるか動的であるかに応じて、非常に高速で簡単な方法になるか、はるかに困難になる可能性があります。

于 2011-01-06T20:36:19.553 に答える