如何自定义表格响应实现? [英] How can I custom table responsive materialize?
本文介绍了如何自定义表格响应实现?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的脚本是这样的:
<table class="responsive-table">
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thr</th>
<th>Fri</th>
<th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>09:00-09:30</li>
<li>10:00-10:30</li>
</ul>
</td>
<td>
<ul>
<li>14:00-14:30</li>
</ul>
</td>
<td>
<ul>
<li>12:30-13:00</li>
<li>14:00-14:30</li>
</ul>
</td>
<td>
<ul>
<li>15:00-16:00</li>
</ul>
</td>
<td>
<ul>
<li>16:00-16:30</li>
</ul>
</td>
<td>
<ul>
<li>09:00-09:30</li>
</ul>
</td>
<td>
<ul>
<li>-</li>
</ul>
</td>
</tr>
</tbody>
</table>
演示: https://jsfiddle.net/g9b7oj8t/
如果可以通过桌面访问它,看起来不错
If it's accessed by desktop, it looks good
但是,如果通过移动设备访问,它看起来会很杂乱
But if it's accessed by mobile, it looks messy
如何从实现中自定义CSS,以使移动设备上的显示整齐?
How do I customize css from materialize so that the display on mobile is neat?
推荐答案
这是Materialize
的一个已知问题. 在这里找到问题的参考.
This is a known issue with Materialize
. Here you find the reference to the problem.
这是GitHub上建议的解决方案.
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>
但是要正常工作,您不能在单元格内使用太多样式,否则高度将不会得到尊重.
But to works properly you can't use too many styles inside the cells, otherwise the heights won't be respected.
这篇关于如何自定义表格响应实现?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文