Width of a <td> is not of last size

Question

Good afternoon, I’m having a question here in the form mounting using and varied.

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 the 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 field "RAPSI number" does not get 400px width, anyone knows what it is? I do not have much experience with tables, if help follows the codepen

http://codepen.io/haykou/pen/GtcxL

Answer 1

I don’t understand why using a table, apart from table patterns via CSS... If you really want to use table (if it’s to show tabular data, ok, otherwise do not recommend), use colspan="2" in the last cell, and remove the display for 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>