On large screens my table TH is on top but when I run it on mobile devices those THs goes to the left side. Is that the default behavior of TH of tables? I'm using Matrialize css class of 'responsive-table'.
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
Yes, that is the default behavior when you add a class of
responsive-table. The documentation states:
Add class="responsive-table" to the table tag to make the table horizontally scrollable on smaller screen widths.
Get into the habit of checking documentation! I've never used materialize but I found the answer very quickly by searching their website.
Source: Tables in materialize.css