Skip to main content
adicionou 191 caracteres ao conteúdo
Fonte Link
Felipe Paetzold
  • 4,6mil
  • 33
  • 67

Você pode usar dois parágrafos dentro do seu <td>

.tab_dados {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.tab_dados a {
  color: #484848;
  text-decoration: none;
}
.tab_dados th {
  background: #0091FF;
  color: #FFFFFF;
  font-style: italic;
}
.tab_dados tr {
  height: 50px;
  border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
  background: #F7F7F7;
}
.tab_dados tr:nth-child(even) {
  background: #FFFFFF;
}
.tab_dados tr:hover {
  background: #F1F1F1;
}
tfoot tr td {
  border: 0;
  height: 40px;
}
.tfoot {
  width: 100%;
}
.observacao {
  font-size: 14px;
  color: #ccc;
}
<table class="tab_dados">
  <tr>
    <th>NOME</th>
    <th>IDADE</th>
    <th>ESTADO</th>
  </tr>

  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <div>
      <td>
        <p>Antonio da Silva Sauro</p>
        <p class="observacao">Observação</p>
      </td>
    </div>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
</table>

Você pode usar dois parágrafos dentro do seu <td>

.tab_dados {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.tab_dados a {
  color: #484848;
  text-decoration: none;
}
.tab_dados th {
  background: #0091FF;
  color: #FFFFFF;
  font-style: italic;
}
.tab_dados tr {
  height: 50px;
  border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
  background: #F7F7F7;
}
.tab_dados tr:nth-child(even) {
  background: #FFFFFF;
}
.tab_dados tr:hover {
  background: #F1F1F1;
}
tfoot tr td {
  border: 0;
  height: 40px;
}
.tfoot {
  width: 100%;
}
.observacao {
  font-size: 14px;
  color: #ccc;
}
<table class="tab_dados">
  <tr>
    <th>NOME</th>
    <th>IDADE</th>
    <th>ESTADO</th>
  </tr>

  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
</table>

Você pode usar dois parágrafos dentro do seu <td>

.tab_dados {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.tab_dados a {
  color: #484848;
  text-decoration: none;
}
.tab_dados th {
  background: #0091FF;
  color: #FFFFFF;
  font-style: italic;
}
.tab_dados tr {
  height: 50px;
  border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
  background: #F7F7F7;
}
.tab_dados tr:nth-child(even) {
  background: #FFFFFF;
}
.tab_dados tr:hover {
  background: #F1F1F1;
}
tfoot tr td {
  border: 0;
  height: 40px;
}
.tfoot {
  width: 100%;
}
.observacao {
  font-size: 14px;
  color: #ccc;
}
<table class="tab_dados">
  <tr>
    <th>NOME</th>
    <th>IDADE</th>
    <th>ESTADO</th>
  </tr>

  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <div>
      <td>
        <p>Antonio da Silva Sauro</p>
        <p class="observacao">Observação</p>
      </td>
    </div>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
</table>

Fonte Link
Felipe Paetzold
  • 4,6mil
  • 33
  • 67

Você pode usar dois parágrafos dentro do seu <td>

.tab_dados {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.tab_dados a {
  color: #484848;
  text-decoration: none;
}
.tab_dados th {
  background: #0091FF;
  color: #FFFFFF;
  font-style: italic;
}
.tab_dados tr {
  height: 50px;
  border-bottom: 1px solid #D5D5D5;
}
.tab_dados tr:nth-child(odd) {
  background: #F7F7F7;
}
.tab_dados tr:nth-child(even) {
  background: #FFFFFF;
}
.tab_dados tr:hover {
  background: #F1F1F1;
}
tfoot tr td {
  border: 0;
  height: 40px;
}
.tfoot {
  width: 100%;
}
.observacao {
  font-size: 14px;
  color: #ccc;
}
<table class="tab_dados">
  <tr>
    <th>NOME</th>
    <th>IDADE</th>
    <th>ESTADO</th>
  </tr>

  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
  <tr>
    <td>
      <p>Antonio da Silva Sauro</p>
      <p class="observacao">Observação</p>
    </td>
    <td>26</td>
    <td>MG</td>
  </tr>
</table>