Início / coding / Perguntas / 79582593
Accepted
HJA24
Asked: 2025-04-20 00:21:55 +0800 CST

Transformar tabela em uma matriz matemática

  • 772

Em matemática, uma matriz é uma matriz retangular ou tabela de números, símbolos ou expressões, com elementos ou entradas organizados em linhas e colunas, que é usada para representar um objeto matemático ou propriedade de tal objeto.

Abaixo está um exemplo de uma matriz

insira a descrição da imagem aqui

Gostaria de recriar a tabela usando CSS / HTML

<table>
  <tr>
    <td>1</td>
    <td>9</td>
    <td>-13</td>
  </tr>
  <tr>
    <td>20</td>
    <td>5</td>
    <td>-6</td>
  </tr>
</table>

Como ficaria minha folha de estilo se eu recriasse as "bordas"?

html

3 respostas

  1. Best Answer

    Bordas esquerda e direita nos pseudoelementos tablee para as "bordas" superior/inferiorlinear-gradient

    table {
  border-collapse: collapse;
  border-left: 2px solid grey;
  border-right: 2px solid grey;
  position: relative;
}

table:before,
table:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, grey 10px, transparent 10px, transparent calc(100% - 10px), grey calc(100% - 10px))
}

table:after {
  bottom: 0;
}

td {
  padding: .5rem;
  text-align: center;
}
    <table>
  <tr>
    <td>1</td>
    <td>9</td>
    <td>-13</td>
  </tr>
  <tr>
    <td>20</td>
    <td>5</td>
    <td>-6</td>
  </tr>
</table>

    • 4

  2. Uma ideia usandoborder-image

    table {
  /* 2px is the thickness and 10px is the size of the top part*/
  border-image: linear-gradient(90deg,#000 10px,#0000 0 calc(100% - 10px),#000 0) 1/2px;
}

td {
  padding: .5rem;
  text-align: center;
}
    <table>
  <tr>
    <td>1</td>
    <td>9</td>
    <td>-13</td>
  </tr>
  <tr>
    <td>20</td>
    <td>5</td>
    <td>-6</td>
  </tr>
</table>

    • 1

    • <table>está em um <main>. <main>é atribuídoposition: relative

    • Um pseudoelemento com position: absoluteé colocado à esquerda ( main::before) e à direita ( main::after) de <table>.

    :root {
  font: normal 600 4ch/1.5 "Noto Serif Display", serif;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0.25ch;
}

main {
  position: relative;
  width: fit-content;
  margin: 10vh auto;
}

main::before,
main::after {
  content: "";
  position: absolute;
  display: block;
  width: 0.25rem;
  height: calc(5ch + 0.5ex);
  border: 4px solid black;
}

main::before {
  top: 0;
  left: 0;
  border-right: 0;
}

main::after {
  top: 0;
  right: -0.1rem;
  border-left: 0;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
}

td {
  width: 4ch;
  padding: 0;
  text-align: center;
}

tr:first-child td {
  padding-bottom: 0.25ex;
}

tr:last-child td {
  padding-top: 0.25ex;
}

td:first-child {
  padding-left: 0.25rem;
}

td:last-child {
  padding-right: 0.25rem;
}
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Display&display=swap" rel="stylesheet">

<main>
  <table>
    <tr>
      <td>1</td>
      <td>9</td>
      <td>&minus;13</td>
    </tr>
    <tr>
      <td>20</td>
      <td>5</td>
      <td>&minus;6</td>
    </tr>
  </table>
</main>

    • 0

relate perguntas