Double checbox (One below the other) with an input

0

Well, that is, I am trying to place two checkbox one below the other, that if I got it, but I want that consequently, next to it appears a input that occupies the size of the two checkbox .

link

<td>
<tr>
<td><input type="checkbox" /></td><td colspan="0"><input class="form-control " type="text" name="totalfinal" id="totalfinal"  value=""/></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
</tr>
</td>

You must also go to Importe Total for those who see the JSFiddle and place it below.

    
asked by Alberto Cepero de Andrés 10.08.2017 в 10:51
source

2 answers

1

Something like that?

<table>
<tr>
<td><input type="checkbox" /></td>
<td rowspan="2"><input class="form-control " type="text" name="totalfinal" id="totalfinal"  value="" style="height: 30px;" /></td>
</tr>
<tr><td><input type="checkbox" /></td></tr>
</table>

You have to add rowspan to two so that the cell occupies two rows, then you have to increase the size of the input so that it occupies the same as the two check

    
answered by 10.08.2017 / 11:42
source
1

@Alberto I have done an example of very simple layout without a table, I think it is more or less what you are looking for. I have left the css code associated with the elements of the html so that it is seen quickly, if you use this approach it would be convenient to move it to a css file to keep the code clean.

It can be done with tables, although it is preferable to use them to tabulate data and not to format.

<div style="display:inline-block; width=50%;">
   <p>Dirección de entrega</p>
   <div style="display:inline-block; width=20%; vertical-align:top;">
     <input type="checkbox" style="margin-top:24px;"/>
     <br>
     <input type="checkbox" style="margin-top:24px;"/>
   </div>
   <div style="display:inline-block; width=20%; border:1px solid #444;">
     <p style="padding: 0 10px;">Elecno Deimos <br>
     Calle Francia 9 <br>
     Pol. Ind. La Nava III <br>
     13500 Puertollano (Ciudad Real)</p>
   </div>
</div>
<div style="display:inline-block; width=45%; vertical-align:top;">
  <p>Importe total</p>
  <input type="text">
</div>
    
answered by 10.08.2017 в 11:32