<div class="table-container">
  <table class="table is-striped is-fullwidth">
    <thead>
      <tr>
        <th>姓名</th>
        <th>邮箱</th>
        <th>职位</th>
        <th>部门</th>
        <th>入职时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>zhang@example.com</td>
        <td>前端工程师</td>
        <td>技术部</td>
        <td>2025-03-15</td>
      </tr>
    </tbody>
  </table>
</div>

<tr>
  <td>张三</td>
  <td>zhang@example.com</td>
  <td class="is-hidden-mobile">前端工程师</td>
  <td class="is-hidden-tablet">技术部</td>
  <td class="is-hidden-touch">2025-03-15</td>
</tr>

<div class="responsive-table">
  <div class="card-item">
    <strong>姓名：</strong><span>张三</span><br>
    <strong>邮箱：</strong><span>zhang@example.com</span><br>
    <strong>职位：</strong><span>前端工程师</span>
  </div>
  <!-- 更多卡片 -->
</div>

.responsive-table {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
<p>.card-item {
padding: 1rem;
border: 1px solid #dbdbdb;
border-radius: 6px;
background: #fafafa;
}</p><p>@media (min-width: 768px) {
.responsive-table {
display: none;
}
table.table {
display: table;
}
}

<table class="table is-striped is-hoverable is-fullwidth">
  <tr>
    <td class="is-narrow">1</td>
    <td class="is-clipped">这是一段非常长的描述文本...</td>
    <td class="is-hidden-mobile">操作</td>
  </tr>
</table>