使用仅显示在 "small devices" 上的隐藏元素是否被认为是不好的做法？

Question

我正在使用 table 来显示有关在系统中注册的用户的信息。我想让这个 table 在小型（移动）设备上显示时更多 "user friendly"。

这里是：

 <table>
    <thead>
    <tr>
        <td>User ID</td>
        <td>Role</td>
        <td>Group</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Dummy User ID 1</td>
        <td>Dummy User Role 1</td>
        <td>Dummy User Group 1</td>
    </tr>
    <tr>
        <td>Dummy User ID 2</td>
        <td>Dummy User Role 2</td>
        <td>Dummy User Group 2</td>
    </tr>
    ...
    </tbody>
</table>

我正在使用媒体查询来更改 table 在小型设备上的外观。

首先，我隐藏了 thead。

其次，我正在申请 td 元素 "display: block;" 以将它们一个接一个地显示出来。

第三，我决定在用户 ID/角色/组值旁边显示列名称：

<table>
    <thead>
    <tr>
        <td>User ID</td>
        <td>Role</td>
        <td>Group</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <span>User ID:</span> Dummy User ID 1
        </td>
        <td>
            <span>User Role:</span> Dummy User Role 1
        </td>
        <td>
            <span>User Group:</span> Dummy User Group 1
        </td>
    </tr>
    <tr>
        <td>
            <span>User ID:</span> Dummy User ID 2
        </td>
        <td>
            <span>User Role:</span> Dummy User Role 2
        </td>
        <td>
            <span>User Group:</span> Dummy User Group 2
        </td>
    </tr>
    ...
    </tbody>
</table>

因此这些跨度元素仅在小型设备上显示。在中型/大型设备上，"display: none;" 应用于它们，但它们仍然存在于 HTML 标记中。像这样使用不可见的 HTML 元素是否被认为是一种不好的做法？或者也许还有其他更好的解决方案？

Answer 1

我认为这不一定是一种糟糕的做法，但如果将那些 DOM 元素隐藏在屏幕显示中让您变形，我有一个替代解决方案。既然span的内容是一致的，为什么不把它们作为'before'伪元素添加到小设备CSS中呢？

类似于：

td:nth-child(1)::before { content: "User ID: "; }
td:nth-child(2)::before { content: "User Role: "; }
td:nth-child(3)::before { content: "User Group: "; }

这样，您可以让屏幕显示 DOM 美观整洁，并根据需要通过 CSS 添加额外的仅适用于移动设备的标签文本。

使用仅显示在 "small devices" 上的隐藏元素是否被认为是不好的做法？

Is it considered bad practice to use hidden elements which are displayed on "small devices" only?

html

css

html-table

media-queries

responsive-design