imagenes - tablas en html5
¿Bordear alrededor de filas específicas en una tabla? (10)
¡Gracias a todos los que han respondido! He intentado todas las soluciones presentadas aquí y he hecho más búsquedas en internet para otras soluciones posibles, y creo que encontré una que es prometedora:
tr.top td {
border-top: thin solid black;
}
tr.bottom td {
border-bottom: thin solid black;
}
tr.row td:first-child {
border-left: thin solid black;
}
tr.row td:last-child {
border-right: thin solid black;
}
<html>
<head>
</head>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr class="top row">
<td>one</td>
<td>two</td>
</tr>
<tr class="bottom row">
<td>three</td>
<td>four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr class="top bottom row">
<td colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</body>
</html>
Salida:
En lugar de tener que agregar las clases top , bottom , left y right a cada <td> , todo lo que tengo que hacer es agregar la top row a la <tr> superior, la bottom row a la inferior <tr> y la row a cada <tr> en el medio. ¿Hay algo malo con esta solución? ¿Hay algún problema multiplataforma que deba tener en cuenta?
Estoy tratando de diseñar algo de HTML / CSS que pueda poner un borde alrededor de filas específicas en una tabla. Sí, sé que realmente no se supone que use tablas para el diseño, pero aún no conozco suficiente CSS para reemplazarlo por completo.
De todos modos, tengo una tabla con varias filas y columnas, algunas combinadas con rowspan y colspan, y me gustaría poner un borde simple alrededor de las partes de la tabla. Actualmente, estoy usando 4 clases de CSS separadas (arriba, abajo, izquierda, derecha) que adjunto a las celdas <td> que se encuentran a lo largo de la parte superior, inferior, izquierda y derecha de la tabla, respectivamente.
.top {
border-top: thin solid;
border-color: black;
}
.bottom {
border-bottom: thin solid;
border-color: black;
}
.left {
border-left: thin solid;
border-color: black;
}
.right {
border-right: thin solid;
border-color: black;
}
<html>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td class="top left">one</td>
<td class="top right">two</td>
</tr>
<tr>
<td class="bottom left">three</td>
<td class="bottom right">four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td class="top bottom left right" colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</html>
¿Hay alguna manera más fácil de hacer lo que quiero? Intenté aplicar top y bottom a un <tr> pero no funcionó. (ps. Soy nuevo en CSS, por lo que probablemente haya una solución realmente básica a esto que me he perdido).
Nota: Necesito tener múltiples secciones delimitadas. La idea básica es tener múltiples clústeres con bordes que contengan múltiples filas.
¿Qué tal tr {outline: thin solid black;} ? Funciona para mí en tr o tbody elements, y appears ser compatible con la mayoría de los navegadores, incluido IE 8+ pero no antes.
Agrupe filas utilizando la etiqueta <tbody> y luego aplique estilo.
<table>
<tr><td>No Style here</td></tr>
<tbody class="red-outline">
<tr><td>Style me</td></tr>
<tr><td>And me</td></tr>
</tbody>
<tr><td>No Style here</td></tr>
</table>
Y el CSS en style.css
.red-outline {
outline: 1px solid red;
}
Aquí hay un enfoque que usa elementos de tbody que podría ser la manera de hacerlo. No puede establecer el borde en un tbody (lo mismo que no puede hacer en un tr) pero puede establecer el color de fondo. Si el efecto que desea obtener se puede obtener con un color de fondo en los grupos de filas en lugar de un borde, esto funcionará.
<table cellspacing="0">
<tbody>
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tbody bgcolor="gray">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
<tbody>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tbody bgcolor="gray">
<tr>
<td colspan="2">hello</td>
</tr>
<tbody>
<tr>
<td colspan="2">world</td>
</tr>
</table>
En función de su requisito de que desea poner un borde alrededor de un bloque arbitrario de celdas MxN, realmente no hay una manera más fácil de hacerlo sin usar Javascript. Si se arreglan sus celdas, puede usar flotadores, pero esto es problemático por otras razones. lo que estás haciendo puede ser tedioso, pero está bien.
Ok, si estás interesado en una solución de Javascript, usando jQuery (mi enfoque preferido), terminas con este pedazo de código bastante aterrador:
<html>
<head>
<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
box(2, 1, 2, 2);
});
function box(row, col, height, width) {
if (typeof height == ''undefined'') {
height = 1;
}
if (typeof width == ''undefined'') {
width = 1;
}
$("table").each(function() {
$("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
$("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
$("tr", this).slice(row - 1, row + height - 1).each(function() {
$(":nth-child(" + col + ")", this).addClass("left");
$(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
});
});
}
</script>
</head>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
</tfoot>
</table>
</html>
Con mucho gusto recibiré sugerencias sobre formas más fáciles de hacer esto ...
La única otra manera que se me ocurre es encerrar cada una de las filas que necesita un borde en una tabla anidada. Eso hará que el borde sea más fácil de hacer, pero potencialmente creará otros problemas de diseño, tendrá que establecer manualmente el ancho en las celdas de la tabla, etc.
Su enfoque puede ser el mejor dependiendo de sus requisitos de diseño y el enfoque sugerido aquí es solo una alternativa posible.
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td>
<table style="border: thin solid black">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td>
<table style="border: thin solid black">
<tr>
<td>hello</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
Si establece el estilo de collapse border-collapse para collapse en la tabla principal, debe poder aplicar el estilo tr : (los estilos están en línea para la demostración)
<table style="border-collapse: collapse;">
<tr>
<td>No Border</td>
</tr>
<tr style="border:2px solid #f00;">
<td>Border</td>
</tr>
<tr>
<td>No Border</td>
</tr>
</table>
Salida:
Una forma más fácil es hacer que la tabla sea un control del lado del servidor. Podría usar algo similar a esto:
Dim x As Integer
table1.Border = "1"
''Change the first 10 rows to have a black border
For x = 1 To 10
table1.Rows(x).BorderColor = "Black"
Next
''Change the rest of the rows to white
For x = 11 To 22
table1.Rows(x).BorderColor = "White"
Next
Yo solo estaba jugando con esto también, y esta parecía ser la mejor opción para mí:
<style>
tr {
display: table; /* this makes borders/margins work */
border: 1px solid black;
margin: 5px;
}
</style>
Tenga en cuenta que esto evitará el uso de anchos de columna fluidos / automáticos , ya que las celdas ya no se alinearán con las de otras filas, pero el formato de borde / color aún funciona correctamente. La solución es dar a los TR y TD un ancho especificado (ya sea px o%).
Por supuesto, podría hacer el selector tr.myClass si desea aplicarlo solo a ciertas filas. Aparentemente display: table no funciona para IE 6/7, sin embargo, pero probablemente haya otros hacks (hasLayout?) Que puedan funcionar para esos. :-(
el truco está en contornear la propiedad gracias a la respuesta del enigment con poca modificación
usa esta clase
.row-border{
outline: thin solid black;
outline-offset: -1px;
}
luego en el HTML
<tr>....</tr>
<tr class="row-border">
<td>...</td>
<td>...</td>
</tr>
