CODEWITHSUNDEEP
htmlcssangularhtml-tablebootstrap-4
Jesus Cabrita
Jesus Cabrita

Reputation: 375

Problem with a Bootstrap 4 table inside a card

This is my problem

Photo Error

As u see, i dont know why the table get that format inside the card. I need the table to be centered or at least not show that blank space that shows at this time. ... this is my code(im using angular 6)

<div class="row">
          <div class="col-md-6">
            <div class="header">
              <h4 style="padding:10px" class="title">Dispositivo de Ejecucion</h4>
            </div>
            <div>
              <table class="table table-bordered table-condensed table-responsive ">
                <thead class="thead-dark">
                  <tr>
                    <th>Marca</th>
                    <th>Sistema Operativo</th>
                    <th>Version</th>
                    <th>Modelo</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>{{dispositivoCdp[0].nombredispositivo}}</td>
                    <td>{{dispositivoCdp[0].sistema_operativo}}</td>
                    <td>{{dispositivoCdp[0].version}}</td>
                    <td>{{dispositivoCdp[0].modelo}}</td>
                  </tr>
                </tbody>

              </table>
            </div>
            

          </div>

          <div class="col-md-6 justify-content-center">
           
                <div class="header">
                    <h4 style="padding:10px" class="title">Tiempo de Ejecucion</h4>
                  </div>
            
                <table class="  table table-bordered table-responsive ">
                    <thead class="thead-dark">
                      <tr>
                        <th>Inicio</th>
                        <th>Fin</th>
                        <th>Duracion</th>
                      </tr>
                    </thead>

                    <tbody>
                      <tr>
                          <td>{{dispositivoCdp[0].nombredispositivo}}</td>
                          <td>{{dispositivoCdp[0].sistema_operativo}}</td>
                          <td>{{dispositivoCdp[0].version}}</td>
                          
                      </tr>
                    </tbody>
  
                  </table>
          </div>
          
        </div>

Have any suggestion of what im doing wrong? i try to use table-sm inside the table class but i dont geet any results

Upvotes: 3

Views: 13136

Answers (3)

Ratto
Ratto

Reputation: 178

The problem in your code is the structure, to make a table "responsive", in Bootstrap 4, you have to insert it inside a <div> with table-responsive class, not in the table classes.

Esample:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Read the docs: https://getbootstrap.com/docs/4.6/content/tables/#responsive-tables

Upvotes: 0

blue piranha
blue piranha

Reputation: 3874

Use this

 <table class="table table-bordered table-condensed table-responsive" style="display:table">

Upvotes: 2

Christopher Sabin
Christopher Sabin

Reputation: 74

Try to delete "table-responsive" in your class. I think that will solve your problem.

Upvotes: 0

Related Questions