¿Borde alrededor de filas específicas en una tabla?

https://stackoverflow.com/questions/670424

21-08-2019
|

Pregunta

Estoy intentando diseñar HTML/CSS que pueda poner un borde alrededor de filas específicas en una tabla.Sí, sé que se supone que no debo usar tablas para el diseño, pero todavía no conozco suficiente CSS para reemplazarlo por completo.

De todos modos, tengo una tabla con varias filas y columnas, algunas fusionadas con rowspan y colspan, y me gustaría poner un borde simple alrededor de partes de la tabla.Actualmente, estoy usando 4 clases CSS separadas (arriba, abajo, izquierda, derecha) que adjunto al <td> celdas que se encuentran en 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>

¿Existe alguna manera más fácil de hacer lo que quiero?Intenté aplicar la parte superior e inferior a un <tr> pero no funcionó.(PD.Soy nuevo en CSS, por lo que probablemente haya una solución muy básica para esto que me he perdido).

nota: Necesito tener varias secciones con bordes.La idea básica es tener varios grupos con bordes, cada uno de los cuales contiene varias filas.

Solución

¿Qué hay de tr {outline: thin solid black;}? Funciona para mí en elementos tr o tbody, y aparece para ser compatible con la mayoría de los navegadores, incluyendo IE 8+ pero no antes.

Otros consejos

¡Gracias a todos los que han respondido!Probé todas las soluciones presentadas aquí y busqué más en Internet otras posibles soluciones, 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>

Producción:

enter image description here

En lugar de tener que agregar el top, bottom, left, y right clases a cada <td>, todo lo que tengo que hacer es agregar top row a la cima <tr>, bottom row hasta el fondo <tr>, y row a cada <tr> entre.¿Hay algún problema con esta solución?¿Hay algún problema multiplataforma que deba tener en cuenta?

Si define el estilo border-collapse a collapse en la tabla primaria que debe ser capaz de aplicar estilo al tr: (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:

salida HTML

Sólo estaba jugando con hacer esto también, y esto 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 ancho de las columnas de fluidos / automáticas , como las células ya no se alinearán con los de otras filas, pero formato de borde / el color todavía funciona bien. La solución es dar el TR y TDS un ancho especificado (ya sea px o%).

Por supuesto que podría hacer que el selector de tr.myClass si desea aplicarlo sólo en ciertas filas. Al parecer display: table no funciona para IE 6/7, sin embargo, pero es probable que haya otros hacks (hasLayout?) Que podría funcionar para ellos. : - (

Este es un método que utiliza elementos tbody que podrían ser la manera de hacerlo. No se puede establecer la frontera en un tbody (igual que no se puede en un tr), pero se puede establecer el color de fondo. Si el efecto que está queriendo acheive se puede obtener con un color de fondo en los grupos de filas en lugar de una frontera que 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>

Agrupe las filas usando el <tbody> etiquetar y luego aplicar 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;
}

La única otra forma que se me ocurre para hacerlo es encerrar cada una de las filas que necesita un borde alrededor de una tabla anidada. Eso hará que la frontera más fácil de hacer, pero potencialmente creat otros problemas de diseño, tendrá que configurar manualmente el ancho de las celdas de tabla etc.

Su enfoque bien puede ser la mejor opción en función de sus otros rerquirements de diseño y el enfoque propuesto aquí es sólo 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>

De acuerdo con su requisito de que usted quiere poner un borde alrededor de un bloque arbitrario de células MxN no hay realmente ninguna manera más fácil de hacerlo sin utilizar Javascript. Si sus células se fijan con usted puede utilizar flotadores, pero esto es problemático por otras razones. lo que está haciendo puede ser tedioso pero está bien.

Ok, si está interesado en una solución Javascript, usando jQuery (mi método preferido), se termina con esta pieza bastante miedo de código:

<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>

Yo tomo felizmente sugerencias sobre las formas más fáciles de hacer esto ...

es el truco con rel="nofollow delinear propiedad gracias a enigment's responder con poca modificación

utilizar esta clase

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

A continuación, en el HTML

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

y el resultado es espero que esto le ayuda

Una forma más fácil es hacer que la mesa de control del lado del servidor. Usted podría utilizar 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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow