MaterializeCss Table with fixed head and aligned column content
After some testing I figured it out, essentially if you use the same CSS as me, you only need to replace the flex: 1 auto; properties to flex: 1; (remove the auto and it aligns perfectly).
Furthermore, if you need the head to be perfectly aligned to the body (there will be a small offset due to the scrollbar, just add a padding-right property to thead tr{} that matches the scroll bar width)
html table tbody scroll without td contents break into multiple lines
To achive the goal you can hide the overflow and word wrapping like as follows.
<!DOCTYPE html><html>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title> Materialize.css Admin Data Table </title> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style> #products-table tbody{ display:block; height:400px; overflow:auto; } #products-table thead tr th, #products-table tbody tr td{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #products-table thead, #products-table tbody tr{ display:table; width:100%; table-layout:fixed; } #products-table{ border:1px solid rgba(0,0,0,0.12); width:100%; } </style></head><body> <div class="container"> <table id="products-table" class="bordered products-table centered"> <thead> <tr> <th>S.No</th> <th>Product Name</th> <th>Product Category</th> <th>Tax Name</th> <th>Tax(%)</th> <th>Tax Value</th> <th>Product Price</th> <th>Price With Tax</th> <th>Action</th> </tr> </thead> <tbody id="products-table-tbody"> <tr> <td>1</td> <td>Aloo Chaat Masala</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>89.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>93.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>2</td> <td>Du Barry</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>89.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>93.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>3</td> <td>Vegetable Stacks</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>89.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>93.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>4</td> <td>Grilled Mediterranean</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.95</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>99.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>103.95</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>5</td> <td>Mushroom Medley</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>89.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>93.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>6</td> <td>BBQ Cottage Cheese</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.95</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>99.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>103.95</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>7</td> <td>Chatpata Paneer Bhurji</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.95</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>99.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>103.95</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>8</td> <td>Grilled Chicken</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>5.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>109.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>114.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>9</td> <td>Portuguese BBQ Chorizo</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>6.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>129.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>135.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>10</td> <td>Pulled Chicken Tandoori</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>5.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>109.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>114.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>11</td> <td>Pollo A LA Caccitore</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>5.95</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>119.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>124.95</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>1</td> <td>Aloo Chaat Masala</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>89.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>93.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>11</td> <td>Du Barry</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>89.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>93.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>12</td> <td>Vegetable Stacks</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>89.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>93.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>13</td> <td>Grilled Mediterranean</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.95</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>99.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>103.95</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>14</td> <td>Mushroom Medley</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>89.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>93.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>15</td> <td>BBQ Cottage Cheese</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.95</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>99.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>103.95</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>16</td> <td>Chatpata Paneer Bhurji</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>4.95</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>99.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>103.95</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>17</td> <td>Grilled Chicken</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>5.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>109.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>114.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>18</td> <td>Portuguese BBQ Chorizo</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>6.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>129.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>135.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>19</td> <td>Pulled Chicken Tandoori</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>5.45</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>109.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>114.45</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> <tr> <td>20</td> <td>Pollo A LA Caccitore</td> <td>Grill</td> <td>GST</td> <td>5</td> <td>5.95</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>119.00</td> <td> <i class="fas fa-inr" aria-hidden="true"></i>124.95</td> <td> <button class="btn-small"> <i class="material-icons right">edit</i> </button> <button class="btn-small red"> <i class="material-icons right">delete</i> </button> </td> </tr> </tbody> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script> <!-- Slim Scroll --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script></body>
</html>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.
Related Topics
What Might Cause CSS to Fail to Load Occasionally on All Browsers
Is Position: Static Identical to Position: Relative, with No Other Properties Specified
How to Alternate The Number of Children Between Odd and Even Rows
Unwanted CSS Injected into Posts
CSS Background Color Extend as Far as Text
Fixed Position Background Image in Firefox Doesn't Work with Transformed Element. Is This a Ff Bug
Large Iconfont Icon Cut Off on The Right Side
Datatables with Bootstrap 4 Looks Messy
<Style> and <Script> Tags Are Displayed Physically on Page
Are There Appearance CSS Rules for Webkit-Overflow-Scrolling: Touch "Handle" in iOS 5
Why Doesn't Ie10 Display Nested CSS3 3D Transformed Elements
Advanced Custom Syntax Coloring for Aptana Studio 3 (.Less)
CSS Triangle + "After" Implementation
Horizontal Submenu for a Vertical Main Menu Using Bootstrap
Why Does an Absolute Position Element Wrap Based on Its Parent's Right Bound
Translate3D Between 0% and Negative % in Ie10