如何在表格内添加单选按钮或复选框?
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<table>
<thead><th>radio button</thead>
<tbody><tr><td><input type="radio" value="r1"></td></tr></tbody>
</table>
</body>
</html>
答案 0 :(得分:2)
与F12 opacity:0
中一样,这意味着您的收音机不可见:
作为materialize doc,您必须将radio
与class="with-gap"
一起使用,如下所示:
<p>
<label>
<input class="with-gap" name="yourName" type="radio"/>
<span>yout text</span>
</label>
</p>
查看工作代码
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<table>
<thead>
<th>radio button</thead>
<tbody>
<tr>
<td>
<p>
<label>
<input class="with-gap" name="group3" type="radio" />
<span>Red</span>
</label>
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
答案 1 :(得分:0)
根据具体实现中的准则添加单选按钮。如果不需要任何标签文本,则可以添加空跨度。
<label>
<input type="radio" />
<span>label text</span>
</label>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<table>
<thead><th>radio button</thead>
<tbody><tr><td><label>
<input type="radio" />
<span></span>
</label></td></tr></tbody>
</table>
</body>
</html>