Início / coding / Perguntas / 79574008
Accepted
johnsankey
Asked: 2025-04-15 05:10:06 +0800 CST

Como limpar tabela HTML usando CSS apenas para tornar a largura responsiva

  • 772

Acho que em HTML, então para começar codifiquei uma tabela de largura responsiva da seguinte maneira:

<table style="width:100%; color: black; font-family: Arial, sans-serif">
  <tr>
    <td style="width: 20%; font-size: 1.7vw; font-weight: bold" valign=top>
      &nbsp; Agent
    </td>
    <td style="width:70%; font-size: 1.4vw" valign=top>
      details of agent
    </td>
  </tr>
</table>

A tabela tem meia dúzia de linhas, então repetir toda a bagunça acima para cada linha funciona. Mas é uma porcaria!
Alguém tem alguma sugestão para limpar isso para que fique apenas uma tabela HTML, mas com código legível?

html

2 respostas

  1. Não use CSS embutido. Não é uma boa prática. Em vez disso, adicione classes às linhas e colunas da tabela e defina o CSS como abaixo:

    <style>
  table.agent-table {
    width: 100%;
    color: black;
    font-family: Arial, sans-serif;
    border-collapse: collapse;
  }

  .agent-label {
    width: 20%;
    font-size: 1.7vw;
    font-weight: bold;
    vertical-align: top;
    padding: 0.5em;
  }

  .agent-details {
    width: 70%;
    font-size: 1.4vw;
    vertical-align: top;
    padding: 0.5em;
  }
</style>

<table class="agent-table">
  <tr>
    <td class="agent-label">&nbsp; Agent</td>
    <td class="agent-details">details of agent</td>
  </tr>
  <tr>
    <td class="agent-label">&nbsp; Contact</td>
    <td class="agent-details">details of contact</td>
  </tr>
  <tr>
    <td class="agent-label">&nbsp; Office</td>
    <td class="agent-details">details of office</td>
  </tr>
</table>
    • 1
  2. Best Answer

    Mova todo o estilo para:

    .agent-table {
  width: 100%;
  color: black;
  font-family: Arial, sans-serif;

  td:first-child {        /* first cell in each row */
    width: 20%;
    font-size: 1.7vw;
    font-weight: bold;
  }

  td:last-child {         /* last cell in each row */
    width: 70%; 
    font-size: 1.4vw;
  }
}
    <table class="agent-table">
  <tr><td>Agent 1</td><td>details of agent 1</td></tr>
  <tr><td>Agent 2</td><td>details of agent 2</td></tr>
  <tr><td>Agent 3</td><td>details of agent 3</td></tr>
  <tr><td>Agent 4</td><td>details of agent 4</td></tr>
  <tr><td>Agent 5</td><td>details of agent 5</td></tr>
  <tr><td>Agent 6</td><td>details of agent 6</td></tr>
</table>

    • 1

relate perguntas