[英]how to adapt table html css for mobile by thead
问题是是否可以对移动设备进行如下所示的适配,javascript也在考虑中。 [figma mobile visability][1] 我尝试通过 flex,inline 来实现,但没有成功。 问题是,我需要它在列中显示,但经过数小时的搜索,我找不到任何东西 [pc html 代码][2]
day1
pos1
pos2
<table>
<thead>
<tr>
<th>day1</th>
<th>day2</th>
<th>day3</th>
<th>day4</th>
<th>day5</th>
</tr>
</thead>
<tbody>
<tr>
<td>pos1</td>
<td>pos1</td>
<td>pos1</td>
<td>pos1</td>
<td>pos1</td>
</tr>
<tr>
<td>pos2</td>
<td>pos2</td>
<td>pos2</td>
<td>pos2</td>
<td>pos2</td>
</tr>
</tbody>
</table>
table {
width: 100%;
border-collapse: collapse;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
} ```
[1]: https://i.stack.imgur.com/7ajmF.png
[2]: https://i.stack.imgur.com/3FCU3.png
要获得您打算对表格元素执行的操作并不容易。 唯一的解决方案是为每一列创建一个表格,并设置一个网格系统,根据屏幕大小改变表格的宽度。 最简单的方法是使用像 Bootstrap 这样的 css 框架网格系统而不使用表格元素
.my-table{ margin: 3px; }.header-col { background: #333; color: white; font-weight: bold; }.table-col >* { padding: 6px; border: 1px solid #ccc; text-align: left; }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <div> <div class="row my-table"> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 1</div> <div class="col-12">day 1 row 1</div> <div class="col-12">day 1 row 2</div> </div> </div> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 2</div> <div class="col-12">day 2 row 1</div> <div class="col-12">day 2 row 2</div> </div> </div> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 3</div> <div class="col-12">day 3 row 1</div> <div class="col-12">day 3 row 2</div> </div> </div> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 4</div> <div class="col-12">day 4 row 1</div> <div class="col-12">day 4 row 2</div> </div> </div> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 5</div> <div class="col-12">day 5 row 1</div> <div class="col-12">day 5 row 2</div> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.