Learner One Learner One - 7 months ago 8
HTML Question

Default behavior of th table tags

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'.

<table class="responsive-table">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>

<tbody>
<tr>
<td>Alvin</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>

Answer

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