3

Preciso desenhar uma tabela com a seguinte característica: Que cada linha possua uma margem-bottom de 8px.

O destaque em vermelho é a distância que se deve ter entre as linhas. inserir a descrição da imagem aqui

A questão é conseguir adicionar apenas onde desejo. O problema da combinação border-collapse: separate e border-spacing: 8px é que ele aceita apenas 2 parâmetros! (Assim, se eu aumentar o espaçamento da direita, o da esquerda também aumenta, e se eu adicionar espaçamento acima, automaticamente abaixo também ele adiciona.) E o ideal seria conseguir manipular apenas uma destas direções!

Obrigado!

2
  • 1
    Pelo que eu sei, com border-spacing você só vai conseguir esse resultado mesmo: cima e baixo / esquerda e direita. Você pode usar um tamanho baixo, por exemplo, 2px. Assim, quando renderizada a primeira e a última td vão ter um espaçamento quase imperceptível (os 2px), enquanto no meio terá um espaçamento de 4px (2px de cima + 2px de baixo). Não sei se consegui explicar bem. 5/03/2015 às 20:58
  • Compreendi o que você quis dizer sim. No entanto, infelizmente, não consegue atingir o objetivo final isto. Mas obrigado pela ajuda! 7/03/2015 às 18:26

5 Respostas 5

5

Uma solução bem melhor que a minha anterior: use o border-spacing, e compense os efeitos colaterais mexendo na posição da tabela e nas bordas esquerdas das células (ou nas direitas, tanto faz):

div {
  border: 1px solid red;
}

table {
  border-collapse: separate;
  border-spacing: 0 8px;
  margin-top: -8px;
}

td {
  border: 1px solid green;
  border-left-width: 0;
  min-width: 120px;
  height: 18px;
}

td:first-child {
  border-left-width: 1px;
}
<div>
  <table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
  </table>
</div>

4

Se você aceitar lidar com um layout fixo, com larguras de célula predefinidas, é possível obter esse resultado visual empilhando duas tabelas:

table {
    border-collapse: collapse;
    table-layout: fixed;
    margin-bottom: 6px;
}

td {
    border: 1px solid green;
    min-width: 120px;
    height: 18px;
}
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Porém isso tem um impacto negativo sobre a semântica da tabela (já que os dados acabam espalhados por múltiplas tabelas). Pode então ser o caso de não utilizar tabela, e sim divs.

Infelizmente não conheço solução perfeita.

3

Uma solução colocar um "separador" de linhas....

td{
  border:1px solid #000000;
  }
table tr[class=separar]{
  display:block;
  margin-bottom:8px;
  }
<table cellspacing="0" cellpadding="0">
  <tr>
    <td>Dados</td>
    <td>Dados</td>
  </tr>
  <tr class="separar"></tr>
  <tr>
    <td>Dados</td>
    <td>Dados</td>
  </tr>
</table>

2

Uma opção seria utilizar border-collapse:collapse com borda inferior da tr e cor do background e tamanho de espaço desejado. Colocar o background do td da cor da borda desejada e um elemento dentro da td para criar a ilusão de borda, veja melhor no exemplo abaixo:

table{
    width: 100%;
    border-collapse:collapse;
}
table tr {
    border-bottom: solid white 8px; /*Distancia entre tr*/
}
table tr td {
    background-color:green;  /*Cor para criar ilusão de borda*/
}
table tr td:not(:last-child) {
    padding: 1px 0 1px 1px; /*Retirar padding a direita da td, exceto da última para não criar colapso de bordas*/
}
table tr td span {
    display:block;
    background-color:white;
    padding:5px 5px 0 5px;
}
table tr:nth-child(even) td span {
    background-color:#ccc; /*Se desejar alternar cores das linhas*/
}
<table>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
    <tr>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
        <td><span>teste<span></td>
    </tr>
</table>

-3

Aqui funcionou Aplicando a propriedade borderCollapse: "collapse", na tag <table> e borderTop:"16px solid #F5F5F5" na tag <tr>

Meu componente foi feito em .jsx mas podem se atentar apenas para as propriedade sx={{}} da Table e TableRow

import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Typography, IconButton } from '@mui/material';
import { INozzle } from '@pages/Admin/Nozzle/model';
import { useTheme } from '@material-ui/core';
import { NozzleReticenceIcon } from '@components/Icons';

interface TableNozzleProps {
  rows: INozzle[];
}

interface TableColumn {
  key: string;
  label: string;
}

const TableNozzleAdmin: React.FC<TableNozzleProps> = ({rows}) => {
  const theme = useTheme();
  
  const tableHeader: TableColumn[] = [
    { key: 'companyName', label: 'Razão social' },
    { key: 'cnpj', label: 'CNPJ' },
    { key: 'requestingUser', label: 'Usuário solicitante' },
    { key: 'registrationDate', label: 'Data de cadastro' },
    { key: 'authorizedBy', label: 'Autorizado por' },
    { key: 'status', label: 'Status' },
    { key: 'action', label: '' },
  ];

  const removeAccents = (str: string) => {
    return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
  };

  const getStatusColor = (status: string) => {
    const normalizedStatus = removeAccents(status.toLowerCase());

    switch (normalizedStatus) {
      case 'recusado':
        return '#F97A91';
      case 'aguardando validacao':
        return '#FFB800';
      case 'concluido':
        return '#0BB873';
      default:
        return '#3E3D3D';
    }
  };

  const TypographyHeader = ({children}) => (<Typography variant={"body1"} sx={{fontFamily: theme.typography.fontFamily,fontSize:{xs:10,md:12,lg:12,xl:16}, fontWeight:600 }}>{children}</Typography>)
  const TypographyBody = ({children, sx}) => (<Typography variant={"body1"} sx={{fontFamily: theme.typography.fontFamily,fontSize:{xs:10,md:12,lg:12,xl:16}, fontWeight:400, ...sx }}>{children}</Typography>)

  return (
    <TableContainer component={Paper} sx={{boxShadow:"none",overflowX:"inherit"}} >
      <Table sx={{
        borderCollapse: "collapse", // Aplica espacamento entre as linhas   
      }}>
        <TableHead>
          <TableRow>
            {tableHeader.map((headerCell, index) => (
              <TableCell key={index}>
                <TypographyHeader>
                  {headerCell.label}
                </TypographyHeader>
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row, rowIndex) => (
            <TableRow key={rowIndex} sx={{borderTop:"16px solid #F5F5F5"}} >
              {tableHeader.map((headerCell,indexHeader) => (
                <TableCell key={headerCell.key}>
                  {indexHeader === tableHeader.length - 1 ? 
                      (<IconButton onClick={() => {}}> <NozzleReticenceIcon/> </IconButton>) 
                    : 
                      (
                        <TypographyBody sx={{color: getStatusColor(row[headerCell.key])}} >
                          {row[headerCell.key] ?? "-"}
                        </TypographyBody>
                      )
                  }
                </TableCell>
              ))}
            </TableRow>
            ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default TableNozzleAdmin;

Resultado Final

Imagem da tabela

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .