Tables materialize

Navigation
1

Does anyone know how I can make this table aligned with the white part of the background? I'm using materialize.

Picture of how she is.

Tablecode

<divclass="row">
  <div class="col s12 m12 l12">
    <div class="box">
       <div class="box-content">
          <table class="bordered highlight centered">
             <thead>
                <tr>
                   <th>ID</th>
                   <th>Name</th>
                   <th>E-mail</th>
                   <th>Item Price</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                   <td>1</td>
                   <td>Alvin</td>
                   <td>[email protected]</td>
                   <td>$0.87</td>
                </tr>
                <tr>
                   <td>2</td>
                   <td>Alan</td>
                   <td>[email protected]</td>
                   <td>$3.76</td>
                </tr>
                <tr>
                   <td>3</td>
                   <td>Jonathan</td>
                   <td>[email protected]</td>
                   <td>$7.00</td>
                </tr>
             </tbody>
          </table>
       </div>
    </div>
  </div>
</div>

My css 

.box {
    padding: 0px;
    display: block;
    position: relative;
    margin: 25px 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
}
.box-content, .box-footer{
    padding: 15px 20px;
}
    
asked by anonymous 18.01.2018 / 02:08

1 answer

0

Your table has no problem whatsoever. The smallest width on a mobile device (recent and pre-new) is% width (eg, iPhone 3, 4) and does not have this problem, the table can quietly fit into this minimum resolution of 320px. p>

If your layout does not show 320px or higher, there's nothing to worry about. Who should worry is the visitor who should update the device to suit modernity.

See a print of an iPhone 4:

Additional:

It may be that a longer email address can force the table beyond the limit. To avoid this, include this code in your CSS: 

td{
   word-break: break-all;
}
    
18.01.2018 / 03:50
Queries with LIKE operator mysql Disconnecting the headset microphone