0

I created a table inside of a card. The issue I having is that when I minimize the page, some of the html elements begin to leave the card as you can see in the image below. Can someone tell me why this may be happening? Here is a fiddle that has the html and css for this.

enter image description here

<div class="report-card-i text-center text-muted">
            <div class="font-16 m-l-35 p-t-25 p-b-10">Top Locations</div>
            <div class="m-l-15 m-r-15">
                <table class="table">
                    <thead>
                        <tr class="black-cell">
                            <th class="font-light">#</th>
                            
                            <th class="font-light"><span class="m-l-125">Location</span></th>
                            <th class="font-light">Shipments</th>

                        </tr>
                    </thead>
                    <tbody>
                            <tr>
                               <td class="font-16">1</td>
                               <td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
                               <td class="font-16">67</td>
                           </tr>
                             <tr>
                               <td class="font-16">1</td>
                               <td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
                               <td class="font-16">67</td>
                           </tr>
                             <tr>
                               <td class="font-16">1</td>
                               <td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
                               <td class="font-16">67</td>
                           </tr>
                             <tr>
                               <td class="font-16">1</td>
                               <td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
                               <td class="font-16">67</td>
                           </tr>
                             <tr>
                               <td class="font-16">1</td>
                               <td class="font-16"><span class="m-l-50">MINNEAPOLIS, MN</span></td>
                               <td class="font-16">67</td>
                           </tr>
                    </tbody>
                </table>
            </div>
 </div>

.report-card-i{
    background: #fff;
    box-shadow: 2px 2px 10px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    margin-top: 30px;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
csb00
  • 1,091
  • 2
  • 18
  • 36
  • 1
    It's happening because the `table` is too large for the container. Add `overflow: auto;` to `report-card-i `; That will create a horizontal scroll on small screens. – disinfor Jul 23 '20 at 22:17
  • Does this answer your question? [Horizontal scroll on overflow of table](https://stackoverflow.com/questions/19794211/horizontal-scroll-on-overflow-of-table) – disinfor Jul 24 '20 at 18:15

0 Answers0