Borda em torno de linhas específicas em uma tabela?

StackOverflow https://stackoverflow.com/questions/670424

  •  21-08-2019
  •  | 
  •  

Pergunta

Eu estou tentando projetar alguns HTML / CSS que pode colocar uma borda em torno de linhas específicas de uma tabela. Sim, eu sei que não estou realmente deveria mesas de uso para layout, mas eu não sei CSS suficiente para substituí-lo totalmente ainda.

De qualquer forma, eu tenho uma tabela com várias linhas e colunas, alguns se fundiu com rowspan e colspan, e eu gostaria de colocar uma borda simples em torno de partes da tabela. Atualmente, estou usando 4 classes CSS separados (superior, inferior, esquerda, direita) que atribuo às células <td> que estão ao longo da parte superior, inferior, esquerda e direita da tabela, 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 alguma maneira mais fácil de fazer o que eu quero? Eu tentei aplicar parte superior e inferior a um <tr> mas não funcionou. (P. S. Eu sou novo para CSS, então não há provavelmente uma solução muito básica para isso que eu perdi.)

Nota: eu faço necessidade de ter várias seções fronteira. A idéia básica é ter vários clusters fronteira, cada um contendo várias linhas.

Foi útil?

Solução

tr {outline: thin solid black;} Que tal? Obras para me em tr ou tbody elementos e para ser compatível com a maioria dos navegadores, incluindo o IE 8+ mas não antes.

Outras dicas

Obrigado a todos que responderam! Eu tentei todas as soluções apresentadas aqui e eu fiz mais pesquisando na internet para outras soluções possíveis, e eu acho que eu encontrei um que está prometendo: 

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>

Output:

enter descrição da imagem aqui

Em vez de ter que adicionar os top, bottom, left e classes right a cada <td>, tudo o que tenho de fazer é adicionar top row ao topo <tr>, bottom row ao <tr> fundo, e row a cada <tr> no meio. Há algo de errado com essa solução? Existem problemas de plataforma cruzada que eu deveria estar ciente de?

Se você definir o estilo border-collapse para collapse na tabela pai que você deve ser capaz de estilo da tr: (Estilos são inline para demo) 

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

Output:

saída HTML

Eu estava apenas brincando com isso também, e isso parecia ser a melhor opção para mim: 

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

Note que isso vai impedir o uso de larguras de coluna de fluido / automática , como as células já não se alinhem com os outras linhas, mas fronteira / cor formatação ainda funciona OK. A solução é dar o TR e DT uma largura especificada (quer px ou%).

Claro que você poderia fazer a tr.myClass selector se você queria aplicá-lo apenas para determinadas linhas. Aparentemente display: table não funciona para o IE 6/7, no entanto, mas há provavelmente outros hacks (hasLayout?) Que o trabalho poder para aqueles. : - (

Aqui está uma abordagem utilizando elementos tbody que poderiam ser a maneira de fazê-lo. Você não pode definir a fronteira em uma tbody (mesmo que você não pode em tr), mas você pode definir a cor de fundo. Se o efeito que você está querendo acheive pode ser obtida com uma cor de fundo em grupos de linhas em vez de uma borda este trabalho. 

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

linhas do Grupo em conjunto, utilizando a tag <tbody> e, em seguida, aplicar o 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>

E o css no style.css 

.red-outline {
  outline: 1px solid red;
}

A única outra maneira que eu posso pensar de fazer isso é para incluir cada uma das linhas que você precisa uma borda em torno de uma tabela aninhada. Isso fará com que a fronteira mais fácil de fazer, mas potencialmente creat outros problemas de layout, você terá que configurar manualmente a largura em células da tabela etc.

A sua abordagem pode muito bem ser o melhor, dependendo de suas outras rerquirements layout e a abordagem sugerida aqui é apenas uma alternativa possível. 

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

Com base na sua exigência de que você quiser colocar uma borda em torno de um bloco arbitrário de células MXN não há realmente nenhuma maneira mais fácil de fazê-lo sem o uso de Javascript. Se suas células são fixadas com você pode usar carros alegóricos, mas isso é problemático por outras razões. o que você está fazendo pode ser entediante, mas está tudo bem.

Ok, se você estiver interessado em uma solução Javascript, usando jQuery (minha abordagem preferida), você acabar com esta peça bastante assustador 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>

Eu vou alegremente tomar sugestões sobre maneiras mais fáceis de fazer isso ...

o truque é com esboço de propriedade graças a enigment's resposta com pouca modificação

usar essa classe 

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

, em seguida, no HTML 

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

e o resultado é enter descrição da imagem aqui espero que isso ajude você

Uma maneira mais fácil é fazer com que a mesa um controle do lado do servidor. Você poderia usar algo semelhante a isto: 

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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top