【发布时间】：2020-11-21 14:03:50
【问题描述】：
我使用 Materialize 框架创建了一个包含李克特量表答案选项的表格，我发现很难让它在移动设备屏幕宽度上减小其大小。它非常适合，直到宽度低于 466 像素。
我希望桌子出现在移动设备上时可以放在卡片上，但它不起作用。我试图抵消它，激活滚动条，并在 320px 的媒体宽度处减小表格的宽度，但都不起作用。
这是一个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>
<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>【问题讨论】：
-
您好 Alberta，如果您想让您的页面具有响应性，使用
<table>通常是一个糟糕的选择。尝试使用 Flexbox 布局 或 CSS 网格，因为它们更灵活，非常适合响应式设计。 -
@RenevanderLende 谢谢。我使用了 flexbox 方法，效果很好
-
酷，很高兴能帮上忙！
标签： html css html-table responsive-design materialize