Width of a td is not the last size

Question

Width of a td is not the last size

Navigation

#1 by (7 votes)

0

Good afternoon, I have a question here in assembling the form using and assorted.

I have the following table:

<table>
<tr>
  <td>Nome:</td>
  <td>Senha:</td>
</tr>
<tr>
  <td>Código</td>
  <td>E-mail</td>
</tr>
<tr>
  <td class="campo-grande">Número de RAPSI:</td>
</tr>

and CSS:

table{
 margin:0;
padding:0;
}
tr{
 display:block;
 border:1px solid black;
 margin-top:5px;
 }
td{
 display:inline-block;
border:1px solid black;
 width:200px;
}  
.campo-grande{
 width:400px;
}

What happens is that the "Number of RAPSI" field does not get 400px in width, does anyone know what it is? I do not have much experience with tables, if it helps, it follows codepen

link

html css

asked by anonymous 13.10.2014 / 22:42

1 answer

margin: auto; how to apply in this case What is the meaning of the "equal or removed indexing" error in MySQL?

score 7 · Accepted Answer

If you want to use table (if it is to show tabular data, ok, otherwise I do not recommend), use colspan="2" in the last cell, and remove the rules from display to tr and td :

*{
  border-box:box-sizing;
}
table{
  margin:0;
  padding:0;
}
tr{
  border:1px solid black;
  margin-top:5px;
}
td{
  border:1px solid black;
  width:200px;
  padding:0;
}
.campo-grande{
  width:400px;
}

 <table>
    <tr>
      <td>Nome:</td>
      <td>Senha:</td>
    </tr>
    <tr>
      <td>Código</td>
      <td>E-mail</td>
    </tr>
    <tr>
      <td colspan="2" class="campo-grande">Número de RAPSI:</td>
    </tr>
  </table>