时间戳

首页 > 解决方案 > 垂直对齐表格

html - 垂直对齐表格

问题描述

下表按设计水平对齐。在减小移动设备的屏幕尺寸时，任何人都可以建议一种垂直对齐表格的方法吗？

<table class="rides-table">
  <tr>
    <th>Monday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Sunday</th>
  </tr>
  <tr>
    <td>30 miles</td>
    <td>70 miles</td>
    <td>50 miles</td>
    <td>40 miles</td>
  </tr>
  <tr>
    <td>Beginner</td>
    <td>Advanced</td>
    <td>Intermediate</td>
    <td>Beginner</td>
  </tr>
</table>

标签： htmlcss

解决方案

我经常遇到这个问题。但我不认为这是一个需要通过开发来解决的问题。移动设备上的表格问题是用户体验问题。

我们通常如何解决它是转置表格。使用您的示例：

<html>
    <table class="rides-table desktop">
        <tr>
            <th>Monday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Sunday</th>
        </tr>
        <tr>
            <td>30 miles</td>
            <td>70 miles</td>
            <td>50 miles</td>
            <td>40 miles</td>
        </tr>
        <tr>
            <td>Beginner</td>
            <td>Advanced</td>
            <td>Intermediate</td>
            <td>Beginner</td>
        </tr>
    </table>
    
    <table class="rides-table mobile">
        <tr>
            <th>Monday</th>
            <td>Beginner</td>
            <td>30 miles</td>
        </tr>
        <tr>
            <th>Thursday</th>
            <td>Advanced</td>
            <td>70 miles</td>
        </tr>
        <tr>
            <th>Friday</th>
            <td>Intermediate</td>
            <td>50 miles</td>
        </tr>
        <tr>
            <th>Sunday</th>
            <td>Beginner</td>
            <td>40 miles</td>
        </tr>
    </table>
</html>

我使用.desktopand.mobile类来隐藏和显示媒体查询中的元素。

推荐阅读