How to Custom Table Responsive Materialize

How can I custom table responsive materialize?

This is a known issue with Materialize. Here you find the reference to the problem.

This is the proposed solution on GitHub.

<thead>
    <tr>
        <th>Mon<br/> </th>
        <th>Tue<br/> </th>
        <th>Wed<br/> </th>
        <th>Thr<br/> </th>
        <th>Fri<br/> </th>
        <th>Sat<br/> </th>
        <th>Sun<br/> </th>
    </tr>
</thead>

Here the working example on JSFiddle

But to works properly you can't use too many styles inside the cells, otherwise the heights won't be respected.

Adjusting td width on small screens using responsive table feature in materialize css

Your materialize.min.css add this media query:

@media only screen and (max-width: 992px)
table.responsive-table tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
}

The "white-space: nowrap" is your problem. You can overwrite this on tr/td:

tr td {
  max-width: 300px;
  white-space:normal;
}

Related Topics