html - How do I make this Materialize table more responsive on mobile devices
问题描述
I have created a table that has Likert scale answer options with the Materialize framework and I am finding it difficult to make it reduce its size on mobile device screen width. It fits perfectly till it gets to below 466px width.
I want the table to fit on the card when they appear on mobile devices but it doesn't work. I tried to offset it, activate the scrollbar, and reduce the width of the table at the media width of 320px but it all did not work.
Here is a JSFiddle link to it.
CODE:
body {
background-color : wheat;
}<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-content hoverable black-text">
<ol start="10">
<div class="row">
<b>Behaviour</b><br />
<div class="input-field col s12">
<li>
<p>
To what extent do you agree with the following?
(1=strongly agree, 2=agree 3= Neutral, 4= disagree
5=strongly disagree)
</p>
<br />
<p class="mini">
<b>Various Moods</b>
</p>
<p class="mini">Mark only one oval per row.</p>
<table>
<thead>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding-right:20px">
I am calm
</td>
<td>
<label><input class="with-gap" value="Strongly agree" name="grps1" type="radio"/>
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Agree" name="grps1" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Neutral" name="grps1" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Disagree" name="grps1" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Strongly disagree" name="grps1"type="radio" />
<span></span></label>
</td>
</tr>
<tr>
<td style="padding-right:20px">
I am impatient
</td>
<td>
<label><input class="with-gap" value="Strongly agree" name="grps2" type="radio"/>
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Agree" name="grps2" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Neutral" name="grps2" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Disagree" name="grps2" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Strongly disagree" name="grps2" type="radio"/>
<span></span></label>
</td>
</tr>
<tr>
<td style="padding-right:20px">
I don't feel
</td>
<td>
<label><input class="with-gap" value="Strongly agree" name="grps3" type="radio"/>
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Agree" name="grps3" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Neutral" name="grps3" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Disagree" name="grps3" type="radio" />
<span></span></label>
</td>
<td>
<label><input class="with-gap" value="Strongly disagree" name="grps3" type="radio"/>
<span></span></label>
</td>
</tr>
</tbody>
</table>
</li>
</div>
</div>
</ol>
<div>
</div>
</body>解决方案
我能够通过使用 Materialize 网格方法来解决这个问题。这是它的JSFiddle链接。
```
body {
background-color : wheat;
}
``````
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-content hoverable black-text">
<ol start="10">
<div class="row">
<b>Behaviour</b><br />
<div class="input-field col s12">
<li>
<p>
To what extent do you agree with the following?
(1=strongly agree, 2=agree 3= Neutral, 4= disagree
5=strongly disagree)
</p>
<br />
<p class="mini">
<b>Various Moods</b>
</p>
<p class="mini">Mark only one oval per row.</p>
<div class="row">
<div class="col s5"></div>
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s1">3</div>
<div class="col s1">4</div>
<div class="col s1">5</div>
</div>
<div class="row">
<div class="col s5">I am calm</div>
<div class="col s1"><label><input class="with-gap" value="Strongly agree" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Agree" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"> <label><input class="with-gap" value="Neutral" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Disagree" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Strongly disagree" name="grps1" type="radio" />
<span></span></label></div>
</div>
<div class="row">
<div class="col s5"> I am impatient</div>
<div class="col s1"><label><input class="with-gap" value="Strongly agree" name="grps1" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Agree" name="grps2" type="radio" />
<span></span></label></div>
<div class="col s1"> <label><input class="with-gap" value="Neutral" name="grps2" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Disagree" name="grps2" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Strongly disagree" name="grps2" type="radio" />
<span></span></label></div>
</div>
<div class="row">
<div class="col s5"> I don't feel</div>
<div class="col s1"><label><input class="with-gap" value="Strongly agree" name="grps3" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Agree" name="grps3" type="radio" />
<span></span></label></div>
<div class="col s1"> <label><input class="with-gap" value="Neutral" name="grps3" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Disagree" name="grps3" type="radio" />
<span></span></label></div>
<div class="col s1"><label><input class="with-gap" value="Strongly disagree" name="grps3" type="radio" />
<span></span></label></div>
</div>
</li>
</div>
</div>
</ol>
<div>
</div>
<body>推荐阅读
- flutter - Can't able to maintain the drawer state in flutter
- azure - Azure Bot Framework 与 Cosmos DB 集成中 autofac.webapi2 的用途是什么
- c# - 无法绑定 jqGrid 列
- bootstrap-table - BootstrapTable 中的格式化程序与 lit-html 不兼容
- java - 在 Spring Boot 中收到两个响应后如何并行调用 2 External API 并执行合并
- powershell - 如何在powershell http post请求中将jenkins凭据参数作为身份验证标头传递
- jsp - taglibs-standard-impl vs jstl
- shell - 是否可以使用常规变量在 unix shell 中模拟`"$@"` 的行为？
- c# - asp.net 中的单选按钮组
- r - 我可以使用第一个数据文件矢量信息来查找和平均第二个数据文件中的行信息吗？