style - tablas html avanzado
Lineal a través/tachado a través de una fila entera de la tabla HTML (8)
¿Qué hay de posicionar absolutamente un elemento <hr /> sobre la fila? Dependiendo de cuánta estática o dinámica deba ser, podría ser una manera extremadamente rápida / fácil de ir o mucho más difícil.
Después de algunas investigaciones, no pude encontrar una respuesta a esta pregunta. Había this pero en realidad no respondía a mi pregunta. Me gustaría "tachar" una fila completa de la tabla HTML en CSS, no solo el texto que contiene. ¿Es posible? Del ejemplo que vinculé, parece que el estilo tr / incluso no funciona en Firefox. (Y de todos modos, la decoración del texto solo se aplica al texto afaik)
@NicoleMorganErickson, me gusta su respuesta, pero no pude lograr que el ponche afecte solo a la fila aplicada. Además, necesitaba que se aplicaran varias filas, así que modifiqué su solución en una sola clase.
CSS:
tr.strikeout td:before {
content: " ";
position: absolute;
display: inline-block;
padding: 5px 10px;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
La forma más sencilla sería usar una background-image en la tr y sus celdas descendientes (o simplemente usar un background-color transparente en esas celdas).
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;
}
Me gusta la respuesta de Nicole Morgan Erickson , pero podría causar efectos secundarios si implementa su solución literalmente. He añadido algunos pequeños ajustes para mantener este kosher, a continuación ... para que no modifiquemos globalmente cada tabla o cada td con este css .
También quería un botón en la fila para tachar la fila, pero no quería tachar la columna con el botón, por el bien de la visibilidad. Solo quería tachar el resto de la fila. Para esto, lo hice para que cada columna que quiera ser capaz de mostrar el tachado debe declararlo, al estar marcada con una clase. En esta iteración, deberías marcar la tabla como apta para golpes, y también marcar cada td como apta para golpes; pero usted obtiene seguridad al no realizar efectos secundarios en ninguna tabla no golpeable, y obtiene el control de qué columnas debe tachar.
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%;
}
Uso:
<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>
Por último, ya que uso esto con Bootstrap, y considero que las eliminaciones son algo peligroso, he formateado un poco los colores para que coincidan con mi uso.
Mi respuesta (abajo) dice que no es posible. Me equivoqué, como lo señaló @NicoleMorganErickson. Por favor, vea su respuesta (¡y avíselo!) Para saber cómo hacerlo. En resumen, usa :before pseudo-clase para crear un elemento que dibuja un borde en el centro de la celda, sobre el contenido:
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 */
}
(respuesta original)
No, no es posible usar solo CSS y su marca de tabla semántica. Como sugiere @JMCCreative, es posible utilizar visualmente cualquier número de formas para colocar una línea sobre su fila.
En su lugar, sugeriría usar una combinación de color , background-color , font-style:italic y / o text-decoration:line-through para hacer que toda la fila sea obviamente diferente. (Personalmente, ''desvanecería'' el texto a un color mucho más cercano al fondo que el texto normal y lo pondría en cursiva).
Oh sí, sí lo es!
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>
Sí tu puedes. En la primera celda de la fila creas un div que contiene un HR. Flote el div hacia la izquierda y especifique su ancho como un% de su elemento contenedor, en este caso la celda de la tabla. Se extenderá tanto como lo desee a través de las celdas de la tabla en esa fila, incluso más allá del ancho de la tabla, si así lo desea.
Esto funciona para mí:
<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>
Para controlar el ancho de su línea, debe especificar el ancho de la celda de la tabla que contiene el HR. Para el diseño de elementos HR, dicen que no debes tener menos de 3px de altura.
tr {
background-image: url(''data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg=='');
background-repeat: repeat-x;
background-position: 50% 50%;
}
Utilicé http://www.patternify.com/ para generar la url de la imagen 1x1.