Прохождение / зачеркивание всей строки таблицы HTML

Question

После некоторых исследований я не смог найти ответ на этот вопрос. Было это , но оно не отвечало на мой вопрос. Я хотел бы «зачеркнуть» полную строку таблицы HTML в CSS, а не только текст в ней. Это вообще возможно? Из примера, который я привел, кажется, что стиль 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

Answer 4

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

Я использовал http://www.patternify.com/ для создания URL изображения 1x1.

Answer 5

Мне нравится ответ Николь Морган Эриксон , но он может вызвать побочные эффекты , если вы реализуете его решение дословно.Я добавил несколько небольших настроек, чтобы сохранить этот кошерный код ниже ... чтобы мы не глобально модифицировали каждую таблицу или каждый тд с помощью этой CSS .

Я также хотел кнопкуна ряд, чтобы вычеркнуть ряд, но я не хотел вычеркивать столбец с кнопкой, ради видимости.Я просто хотел вычеркнуть остальную часть ряда.Для этого я сделал так, чтобы каждый столбец, который хочет иметь возможность вычеркивать, должен объявлять это, также помечая классом. В этой итерации вам нужно пометить стол как способный к удару, а также пометить каждый тд как способный к удару;но вы получаете безопасность, не создавая побочных эффектов для любых непостижимых таблиц, и вы получаете контроль над тем, какие столбцы вычеркивать. Использование:

<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

Да, вы можете.В первой ячейке строки вы создаете div, содержащий HR.Переместите элемент 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-элементов его высота не должна превышать 3 пикселя.

Answer 8

Как насчет абсолютного позиционирования элемента <hr /> поверх строки. В зависимости от того, насколько статичным или динамичным это должно быть, это может быть очень быстрый / простой путь или намного сложнее.