После некоторых исследований я не смог найти ответа на этот вопрос. Был этот, но на самом деле он не ответил на мой вопрос. Я хотел бы "зачеркнуть" полную строку HTML-таблицы в CSS, а не только текст в ней. Возможно ли это? В примере, который я связал, кажется, что стиль tr не работает даже в Firefox. (И вообще, текстовое оформление применяется только к тексту afaik)
Пропустить/зачеркнуть целую строку HTML-таблицы
Ответ 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>
Ответ 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
, чтобы вся строка была явно различной. (Я лично сильно "увяжу" текст с цветом, который ближе к фону, чем обычный текст, и сделайте его курсивом.)
Ответ 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;
}
Ответ 4
tr {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
background-repeat: repeat-x;
background-position: 50% 50%;
}
Я использовал http://www.patternify.com/ для создания URL-адреса изображения 1x1.
Ответ 5
Мне нравится ответ Николь Морган Эриксон, но он может вызывать побочные эффекты, если ваш проект будет выполнять его дословно. Я добавил несколько небольших настроек, чтобы сохранить эту кошерность ниже... так что мы не глобально изменяем каждую таблицу или каждый тд с помощью этого css.
Я также хотел, чтобы кнопка в строке вычеркнула строку, но я не хотел вычеркивать столбец кнопкой, ради видимости. Я просто хотел вычеркнуть остальную часть строки. Для этого я сделал так, чтобы каждый столбец, который хотел бы показать забастовку, должен объявить это, также будучи помеченным классом. В этой итерации вам нужно будет пометить таблицу как удачную, а также пометить каждый тд как удачный; но вы получаете безопасность, не создавая побочные эффекты, которые не могут быть полезны для таблиц, и вы получаете контроль над тем, какие столбцы вычеркнуть.
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 и рассматриваю удаление как опасную вещь, я немного отформатировал цвета, чтобы соответствовать моему использованию.
Ответ 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%;
}
Ответ 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 пикселей в высоту.
Ответ 8
Как насчет абсолютного позиционирования надстроки элемента <hr />
строки. В зависимости от того, насколько статичным или динамичным это должно быть, это может быть очень быстрый/простой способ пойти или намного сложнее.