Tables materialize

Question

Tables materialize

Asked 6 years, 10 months ago

Viewed 416 times

1

Does anyone know how I can align this table with the white part of the background? I’m using materialize.

Picture of how she looks.

Table code

<div class="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;
}

materialize is responsive. This must be happening for some other code in your CSS or HTML. It gets complicated to answer only by the code provided.

– Sam

2018/01/18 at 01:34
Hello, really you are right, I updated the post by putting the code of my css. I hope it helps.

– user102054

2018/01/18 at 02:04
You have already tested in 320 pixel resolution?

– Sam

2018/01/18 at 02:30
It is because the code you posted does not appear the edit and delete buttons

– Sam

2018/01/18 at 02:32
Yes, this code I posted is from another table that this with the same problem, I thought so would be better to understand without much unnecessary code, I will update the photo ...

– user102054

2018/01/18 at 02:46
I’ve included a CSS in the response that can be useful and prevent long emails from forcing the table width. Abs!

– Sam

2018/01/18 at 03:01

Show 1 more comment

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-01-18T02:50:47+00:00

Your table has no problem at all. The smallest width on a mobile device (recent and pre-recent) is 320px width (e.g., iPhone 3, 4) and does not present this problem, the table can fit peacefully in this minimum resolution of 320px.

If your layout nay presents problems in 320px or higher, there is nothing to worry about. Who should be worry is the visitor who must 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;
}