Tidying up inside tr

0

Good morning! Personally, I still need to improve my skills on HTMl and CSS . I am making a meeting minutes and I am having difficulty aligning TD's that are inside a table TD is appearing on the side of TR follow code:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
  .tabela1,
  .th1,
  .th2,
  .th3,
  .th4,
  .th5,
  .th6,
  .th7,
  .th8,
  .th9,
  .th10,
  .th11 {
    font-family: arial, sans-serif;
    border: 1px solid black;
    width: auto;
    text-align: center;
    border-collapse: collapse;
  }
  
  .tabela2 {
    font-family: arial, sans-serif;
    border: 1px solid black;
    width: 100%;
  }
  
  .tabela3 {
    font-family: arial, sans-serif;
    border: 1px solid black;
    width: 100%;
  }
  
  .tabela4 {
    font-family: arial, sans-serif;
    border: 1px solid black;
    width: 100%;
    text-align: center;
  }
  
  .tr1 {
    border: 1px solid black;
    text-align: left;
    margin: ;
    width: auto;
    text-align: center;
    height: auto;
  }
  
  .tr2 {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
    width: auto;
    background-color: #F0F8FF;
  }
  
  .tr3 {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
    width: 100%;
    border-collpase: collapse;
  }
  
  .tr4 {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
    width: 100%;
    border-collapse: collapse;
  }
  
  .tr5 {
    border: 1px solid black;
    text-align: left;
    padding: 8px;
    width: 100%;
    border-collapse: collapse;
  }
  
  .tr6 {
    border: 1px solid black;
    text-align: center;
    padding: 8px;
    width: 100%;
  }
  
  .tr7 {
    border: 1px solid black;
    text-align: center;
    padding: 8px;
    width: 100%;
  }
  
  .tr8 {
    border: 1px solid black;
    text-align: center;
    padding: 8px;
    width: 100%;
    border-collapse: collapse;
  }
  
  .h4 {
    text-align: center;
    font-weight: 100px;
  }
  
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
  
  td {
    border: 1px solid black;
    padding: 18px;
    height: auto;
    width: auto;
    text-align: center;
  }
</style>

<img class="center" alt="Empresas do Grupo Barão de Mauá" src="https://intranet.baraodemaua.br/files/images/layout/topo.png"class="img-responsive">
<hr width="auto" size="1" color=DarkGreen>
<h4 class="h4"> ATA DE REUNIAO</h4>
<hr width="auto" size="5" color="DarkGreen">
<table class="tabela1">
  <tr class="tr1">
    <th class="th1">AREA EMITENTE</th>
    <th class="th2">LOCAL</th>
    <th class="th3">DATA</th>
    <th class="th4">HORA</th>
  </tr>

  <tr class="tr2">
    <td>TI-Sistemas</td>
    <td>Reitoria - Sala de Reuniao</td>
    <td>04/07/2018</td>
    <td>14:30</td>
  </tr>
</table>
<br>

<table class="tabela2">
  <tr class="tr3">
    <td class="td1"><strong>Agenda: Melhorias no Sistema de Fiscais para o proximo vestibular</strong>
  </tr>
</table>
<br>

<table class="tabela3">
  <tr class="tr4">
    <th rowspan="2">Participantes Fixos:
      <br>
    </th>
  </tr>
  <tr class="tr5">
    <td rowspan="2">Leandro Netto Scatolin
      <br> Cristiano Consule
      <br> Joyce Maria Worschech Gabrielli
      <br> Evelyn Scaramal Raphaloski
      <br>
    </td>
    <th>Participantes Convidados:</th>
  </tr>
</table>
<br>

<hr width="auto%" size="2" color=DarkGreen>
<table class="tabela4">
  <tr class="tr6">
    <th rowspan="2"><strong> Assuntos discutidos</strong></th>
    <br>

    <th> <small>I= Informacao</small></th>
    <th> <small>D= Decisao</small></th>
    <th> <small>A = Acao</small></th>
  </tr>
  <tr class="tr7">
    <th><strong>Responsavel pela</strong></th>
    <th><small>Acao/Decisao/Informacao</small></th>
  </tr>
  <tr class="tr8">
    <td> Criar mecanismo par indentificar fiscais que estavam
      <br>na distribuicao e foram retirados, para permitir o envio de e-mail pelo sistema,
      <br>avisando que o mesmo nao participara mais do vestibular.
      <br> TI- Desenvolvimento
      <br> Comite - Definicao de texto do e-mail</td>
    <td>A</td>
    <td>TI/COMITE</td>
    <td> A definir</td>
  </tr>
</table>

</html>
    
asked by anonymous 18.10.2018 / 15:05

1 answer

0

As it was not specified which table you are having problem, but analyzing I understood that you are having problem in the table with "Fixed Participants" and "Invited Participants". If this is really your problem (not being able to align th with this table), the problem can be solved like this:

<table class="tabela3">
  <tr class="tr4">
    <th>Participantes Fixos:</th>
    <th>Participantes Convidados:</th>
  </tr>
  <tr class="tr5">
  <td>Leandro Netto Scatolin
    <br> Cristiano Consule
    <br> Joyce Maria Worschech Gabrielli
    <br> Evelyn Scaramal Raphaloski
    <br>
  </td>
  </tr>
</table>

If that's really the problem, you put one of th in the wrong tr and the rowspans were messing up as well. I hope I have helped: D

    
18.10.2018 / 15:38