BootStrap 4 Cards and Tables

0

Good morning,

I updated the version of BootStrap for V4, had to change several lines, but the Panel no longer exists, now advise to use the Cards, but the problem is to use the cards with the class table, If using the class table - > table-responsive the table is inside the card however unconfigured, with columns misaligned, and if not use the table is larger than the area of the Card,

Does anyone have the same problem or do you know how to adjust it?

Thank you

    
asked by anonymous 26.02.2018 / 13:49

1 answer

0

Try the following:

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://dummyimage.com/mediumrectangle/222222/eeeeee"alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First</th>
              <th scope="col">Last</th>
              <th scope="col">Handle</th>
            </tr>
          </thead>
         <tbody>
           <tr>
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
             <td>@mdo</td>
           </tr>
           <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
             <td>@fat</td>
           </tr>
           <tr>
             <th scope="row">3</th>
             <td>Larry</td>
             <td>the Bird</td>
             <td>@twitter</td>
           </tr>
         </tbody>
       </table>
     </div>
   </p>
   <a href="#" class="btn btn-primary">Go somewhere</a>
 </div>

    
26.02.2018 / 23:40