Because my table does not acquire both commands overflow-x e and

1

I'm using Bootstrap 3 , so I use container , row and c ol-md-5 , ... I do not know why, but I can not even set a height to the table. p>

<div class="container">
<div class="row">
<div class="card col-md-5">	
<div   style="overflow-x:auto;overflow-y:scroll">

<h4 class="title header" align="center">Pasos</h4>
		
								
<table   class="table table-hover table-bordered" ">
									
	<thead>
		<th>
				<div class="checkbox">

				  	<input id="checkbox1" type="checkbox" >
				  	<label for="checkbox1"></label>

		  		
		</th>
		<th>ID</th>
		<th>Paso</th>
		<th>Resultado</th>

	</thead>

	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox2" type="checkbox">
				  	<label for="checkbox2"></label>
		  		</div>
		</td>
		<td>1</td>
		<td>Paso1</td>
		<td>1:menu Digital......................................................................... </td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox3" type="checkbox">
				  	<label for="checkbox3"></label>
		  		</div>
		</td>
		<td>2</td>
		<td>Paso 2</td>
		<td>3:Saldo total en el numero de cuenta..............................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox3" type="checkbox">
				  	<label for="checkbox3"></label>
		  		</div>
		</td>
		<td>3</td>
		<td>Paso 3</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox4" type="checkbox">
				  	<label for="checkbox4"></label>
		  		</div>
		</td>
		<td>4</td>
		<td>Paso 4</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox4" type="checkbox">
				  	<label for="checkbox4"></label>
		  		</div>
		</td>
		<td>4</td>
		<td>Paso 4</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox4" type="checkbox">
				  	<label for="checkbox4"></label>
		  		</div>
		</td>
		<td>4</td>
		<td>Paso 4</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox4" type="checkbox">
				  	<label for="checkbox4"></label>
		  		</div>
		</td>
		<td>4</td>
		<td>Paso 4</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox4" type="checkbox">
				  	<label for="checkbox4"></label>
		  		</div>
		</td>
		<td>4</td>
		<td>Paso 4</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox4" type="checkbox">
				  	<label for="checkbox4"></label>
		  		</div>
		</td>
		<td>4</td>
		<td>Paso 4</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox4" type="checkbox">
				  	<label for="checkbox4"></label>
		  		</div>
		</td>
		<td>4</td>
		<td>Paso 4</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox4" type="checkbox">
				  	<label for="checkbox4"></label>
		  		</div>
		</td>
		<td>4</td>
		<td>Paso 4</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	<tr>
		<td>
				<div class="checkbox">
				  	<input id="checkbox4" type="checkbox">
				  	<label for="checkbox4"></label>
		  		</div>
		</td>
		<td>4</td>
		<td>Paso 4</td>
		<td>00: Volver al menu de inicio..................................................................................................................................</td>

	</tr>
	
	
	
</table>
									
</div> 	
</div> 
</div> 						
</div> 

</table>

This is my table

    
asked by Jesus Cabrita 03.08.2018 в 17:18
source

1 answer

1

You have some errors, the first is that you have a double quote in the classes of your table after table-bordered :

<table   class="table table-hover table-bordered" "> 

You also forgot to close the div of this part in your thead and place tr to group your table heads :

<thead>
  <tr>
    <th>
        <div class="checkbox">
            <input id="checkbox1" type="checkbox" >
            <label for="checkbox1"></label>
        </div>
    </th>
    ...
  </tr>
</thead>

And at the end of your code you are closing the label table

again

Snippet with your corrected code applying a height of 300px:

<div class="container">
  <div class="row">
    <div class="card col-md-5">
      <div style="overflow-x:auto; overflow-y:scroll; height: 300px">

        <h4 class="title header" align="center">Pasos</h4>


        <table class="table table-hover table-bordered">

          <thead>
            <tr>
              <th>
                <div class="checkbox">

                  <input id="checkbox1" type="checkbox">
                  <label for="checkbox1"></label>

                </div>

              </th>
              <th>ID</th>
              <th>Paso</th>
              <th>Resultado</th>
            </tr>

          </thead>

          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox2" type="checkbox">
                <label for="checkbox2"></label>
              </div>
            </td>
            <td>1</td>
            <td>Paso1</td>
            <td>1:menu Digital......................................................................... </td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox3" type="checkbox">
                <label for="checkbox3"></label>
              </div>
            </td>
            <td>2</td>
            <td>Paso 2</td>
            <td>3:Saldo total en el numero de cuenta..............................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox3" type="checkbox">
                <label for="checkbox3"></label>
              </div>
            </td>
            <td>3</td>
            <td>Paso 3</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox4" type="checkbox">
                <label for="checkbox4"></label>
              </div>
            </td>
            <td>4</td>
            <td>Paso 4</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox4" type="checkbox">
                <label for="checkbox4"></label>
              </div>
            </td>
            <td>4</td>
            <td>Paso 4</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox4" type="checkbox">
                <label for="checkbox4"></label>
              </div>
            </td>
            <td>4</td>
            <td>Paso 4</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox4" type="checkbox">
                <label for="checkbox4"></label>
              </div>
            </td>
            <td>4</td>
            <td>Paso 4</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox4" type="checkbox">
                <label for="checkbox4"></label>
              </div>
            </td>
            <td>4</td>
            <td>Paso 4</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox4" type="checkbox">
                <label for="checkbox4"></label>
              </div>
            </td>
            <td>4</td>
            <td>Paso 4</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox4" type="checkbox">
                <label for="checkbox4"></label>
              </div>
            </td>
            <td>4</td>
            <td>Paso 4</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox4" type="checkbox">
                <label for="checkbox4"></label>
              </div>
            </td>
            <td>4</td>
            <td>Paso 4</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>
          <tr>
            <td>
              <div class="checkbox">
                <input id="checkbox4" type="checkbox">
                <label for="checkbox4"></label>
              </div>
            </td>
            <td>4</td>
            <td>Paso 4</td>
            <td>00: Volver al menu de inicio..................................................................................................................................</td>

          </tr>



        </table>

      </div>
    </div>
  </div>
</div>
    
answered by 03.08.2018 / 17:26
source