que - selectores avanzados css
¿Cómo puede una<etiqueta> llenar por completo su padre<td>? (11)
Aquí está el código relevante (no funciona):
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; width: 100%; height: 100% }
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
La razón es que quiero hacer clic en cualquier lugar de la celda de la tabla para marcar / desmarcar la casilla de verificación.
ediciones: por cierto, no hay soluciones de JavaScript, por razones de accesibilidad. Intenté usar display: block; pero eso solo funciona para el ancho, no para la altura
Quiero un clic en cualquier lugar de la celda de la tabla
<tr onclick="alert(''process click here'');"> ... </tr>
En su fila con "Valor 1" no solo tiene "un poco más de información" sino que también incluye un descanso. Me parece que todo lo que realmente necesita hacer es incluir una <br> en cualquier etiqueta en la columna de la derecha para cuando el contenido de la columna izquierda incluya una <br> . Además, obviamente <label> necesita tener un atributo CSS de display configurado para block .
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display: block;}
</style>
</head>
<body>
<table>
<tr><td>Some column title</td><td>Another column title</td></tr>
<tr><td>Value 1<br>(a bit more info)</td><td><label><input type="checkbox" /> <br> </label></td></tr>
<tr><td>Value 2</td><td><label><input type="checkbox" /></label></td></tr>
</table>
</body>
</html>
Una nota: no obtendrás un rendimiento similar al de un trabajo perfecto en todos los navegadores principales de los últimos 10 años, como IE6, sin recurrir a cosas como JavaScript. Creo que mi solución es la mejor solución sin recurrir a JavaScript.
Encontré usando la display: table funciona para mí. Intenté (la display: table-cell sugerida anteriormente) display: table-cell y eso no funcionó.
td label {
display: table;
box-sizing: border-box;
width: 100%;
height: 100%;
}
Esta respuesta está un poco "allá afuera": para que sea un código HTML válido, debe definir su propia DTD y, en cualquier caso, no funciona en IE u Opera (funciona en Firefox). Por lo tanto, no es una solución viable por ninguna medida, pero pensé que compartiría de todos modos solo por interés:
El HTML:
<table>
<tr>
<td>Some content</td>
<label><input type="checkbox" /></label> <!-- no TD -->
</tr>
<tr>
<td>Some<br />multi-line<br />content</td>
<label><input type="checkbox" /></label>
</tr>
</table>
El CSS:
label { display: table-cell; }
Este código hace lo que quiere y se prueba en IE7 +, FF, Google Chrome, Opera y Safari:
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td{border:1px solid #000;width:200px;height:200px;}
label{display:block;border:1px solid #f00;width:198px;height:198px;}
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
Si su problema no fue resuelto, ¡espero que esto lo resuelva! ;)
La forma en que aplica etiquetas no hace que los elementos de formulario sean totalmente accesibles. La etiqueta debe aplicarse al texto asociado con el elemento de formulario, no solo al elemento de formulario. Pero no hay nada de malo en agregar otra etiqueta sobre el elemento de formulario para hacer que toda el área dentro del TD pueda hacer clic. Esto es realmente deseable para darles a las personas con discapacidades motoras un área más grande para hacer clic. La <label for="whatever">Your label</label> está dirigida a personas que utilizan lectores de pantalla para acceder al formulario web.
Además, no hay nada inaccesible sobre el uso de JavaScript para mejorar la accesibilidad. Se puede usar JavaScript siempre que se degrade graciosamente y no impida que los lectores de pantalla lean la página. Además, no hay forma de utilizar CSS para llenar la altura de la celda en las versiones anteriores de IE (que todavía están en uso por una gran cantidad de usuarios) sin alterar el aspecto de la página. Dicho esto, debes usar jQuery para completar todo el TD . La razón por la que no digo JavaScript es que jQuery te ahorra muchos dolores de cabeza al ocultar gran parte de la codificación compleja que es necesaria para que esto funcione en la gran mayoría de los navegadores.
Aquí está el código completamente habilitado para jQuery habilitado para el navegador:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Accessible Checkboxes</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table > tbody tr").each(function() { // Loop through all table rows
var Highest=0; // We want to find the highest TD... start at zero
var ThisHeight=0; // Initiate the temporary height variable (it will hold the height as an integer)
$($(this).children(''td'')).each(function() { // Loop through all the children TDs in order to find the highest
ThisHeight=parseInt($(this).height()); // Grab the height of the current TD
if (ThisHeight>Highest) { // Is this TD the highest?
Highest=ThisHeight; // We got a new highest value
}
});
$(this).children(''td'').css(''height'',Highest+''px''); // Set all TDs on the row to the highest TD height
});
});
</script>
<style type="text/css">
table {
border: 1px solid #000;
}
td, label {
height: 100%;
min-height: 100%;
}
th {
text-align: left;
}
td, th {
border: 1px solid #000;
}
label {
display: block;
}
</style>
</head>
<body>
<form action="whatever.shtml" method="post" enctype="multipart/form-data">
<table cellspacing="3" cellpadding="0" summary="A description of what''s in the table.">
<thead>
<tr>
<th scope="col">Some column title</th>
<th scope="col">Another column title</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><label for="value1">Value 1<br />(a bit more info)</label></td>
<td><label><input id="value1" type="checkbox" /> </label></td>
</tr>
<tr>
<td scope="row"><label for="value2">Value 2</label></td>
<td><label><input id="value2" type="checkbox" /></label></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Deberá descargar jQuery y colocar el archivo jquery.min.js en una carpeta llamada js .
Como puede ver en el código, el formulario se ha hecho completamente accesible agregando un table summary , thead , th , scope , label for etc. Claro, no fue parte de lo que preguntó, pero lo agregué como un extra prima.
La solución a continuación:
- tiene
<label>que llena por completo la altura<td> - admite cualquier altura de celda (es decir, sin altura fija en píxeles)
- solo en CSS (es decir, sin JavaScript)
- es multiarrancador (MSIE 7/8/9/10/11, Firefox 42, Chrome 46, Seamonkey 2.39, Opera 33, Safari 5.1.7)
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display:block; min-height:2.3em;}
</style>
</head>
<body>
<table style="table-layout:fixed">
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" style="vertical-align:-50%" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
Explicaciones
- la
display:blockhace que la<label>tome el<td>ancho completo - la
min-height:2.3em;hace que la<label>tome la<td>altura completa (la altura mínima es un poco más alta que dos líneas, ya que hay dos líneas en la primera celda de la fila; puede que necesite aumentar, por ejemplo, uso 3.3em en mi código) - la
vertical-align:-50%hace que la casilla de verificación se alinee verticalmente en el centro de la celda (esto solo es necesario si el contenido de la celda abarca más líneas que la primera celda de la fila)
Las etiquetas son elementos en línea por defecto, por lo que establecer el ancho y el alto no hace nada.
label { display: block; }
Lo haría.
(Sin embargo, la práctica de colocar la etiqueta alrededor de la casilla de verificación que se supone que debe estar asociada, en lugar de utilizarla explícitamente, no funciona en IE).
No encontré que las otras respuestas funcionaran en los navegadores actuales (2017), pero posicionar absolutamente la etiqueta funcionó para mí:
https://jsfiddle.net/4w75260j/5/
<html>
<head>
<style type="text/css">
td.checkbox {
position: relative;
}
td.checkbox label {
/* Take up full width/height */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Ensure the checkbox is centered */
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Checkboxes</td>
<td>Text</td>
</tr>
<tr>
<td class="checkbox"><label><input type="checkbox" /></label></td>
<td>Lorem ipsum dolor sit amet...</td>
</tr>
</table>
</body>
</html>
Tenga en cuenta que esta solución usa flexbox para centrar la casilla de verificación; Si se dirige a navegadores antiguos, puede probar el estilo de transformación del centrado .
Prueba este CSS para tu etiqueta
label {
border:1px solid #FF0000;
display:block;
height:35px;
}
Aquí está la demostración en vivo http://jsbin.com/ehoke3/2/
Solo he probado esto en IE 6, 7, 8 y FF 3.6.3.
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
tr {
height: 1px;
}
td {
border: 1px solid #000;
height: 100%;
}
label {
display: block;
border: 1px solid #f00;
min-height: 100%; /* for the latest browsers which support min-height */
height: auto !important; /* for newer IE versions */
height: 100%; /* the only height-related attribute that IE6 does not ignore */
}
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
</table>
</body>
</html>
El truco principal aquí es definir la altura de las filas para que podamos usar una altura del 100% en sus hijos (las celdas) y, por turnos, una altura del 100% en los hijos de las celdas (las etiquetas). De esta forma, sin importar cuánto contenido haya en una celda, expandirá por la fuerza su fila primaria y sus celdas hermanas le seguirán. Como la etiqueta tiene una altura del 100% de su elemento primario que tiene su altura definida, también se expandirá verticalmente.
El segundo y último truco (pero igual de importante) es usar un hack CSS para el atributo min-height, como se explica en los comentarios.
Espero que esto ayude !