小屏下table只显示三列需重构表格结构而非单纯css隐藏；应通过data-*属性存储字段，再用js或服务端逻辑重绘为卡片或精简列表，兼顾可访问性、性能与seo。
小屏下Table只显示三列的关键数据，靠CSS隐藏不现实
Bootstrap默认的响应式表格（.table-responsive）只是加个横向滚动容器，并不会自动筛选列。想“只显示三列”，本质不是隐藏多余列，而是**重构表格结构**——小屏时用data-* 属性存原始字段，再用JS或服务端逻辑重绘为精简列表或卡片式布局。
用data-属性存字段，配合@media + display: none是常见误区
很多人直接给不需要的<th>/<code><td>加<code>class="d-none d-md-table-cell"，结果发现：
- 小屏确实看不见了，但语义结构还在，屏幕阅读器仍会读出全部列
- 表格行数不变，<tr>里依然存在空单元格，影响可访问性和打印样式
- 无法真正“只渲染三列”，DOM体积没减，移动端加载和渲染负担照旧<ul><li>真正关键的三列（比如<code>name、status、action）应作为data-属性挂载在<tr>上<li>小屏时用JS遍历<code><tr>，提取这三个值，生成新的<code><div class="card">或精简<code><table><li>大屏保留原表格，小屏替换整个<code><tbody>或用<code>display: contents做条件渲染（需现代浏览器支持）
Bootstrap 5.3+ 推荐用data-bs-toggle="table-responsive-sm"这类自定义方案
Bootstrap本身没提供“按屏显指定列”的内置类。可行路径是：
- 在<table>上加<code>data-priority-cols='["name","status","action"]'
- 写一个轻量JS函数，在window.matchMedia("(max-width: 768px)").matches为真时触发
- 遍历<thead>找对应<code>th[data-col]，再同步取<td>中同索引的数据<pre class="brush:php;toolbar:false;">const priorityCols = JSON.parse(table.dataset.priorityCols || "[]");
const headers = Array.from(table.querySelectorAll("thead th")).map(th => th.dataset.col);
const priorityIndices = priorityCols.map(col => headers.indexOf(col)).filter(i => i !== -1);</pre>
<p>然后用这些<code>priorityIndices提取每行对应<td>内容，重绘。<h3>后端渲染更稳妥，尤其对SEO和首屏性能敏感的场景</h3>
<p>如果用PHP/Node.js/Django等渲染表格，直接在模板层判断：<code>if mobile then only render name, status, action。这样：
- 不依赖JS执行，无FOUC（闪动）
- DOM干净，无冗余<td>
- 可结合<code><picture></picture>或srcset进一步优化小屏资源
- 避免在前端用
innerHTML拼接HTML字符串，改用document.createElement+textContent防XSS - 注意
colspan和rowspan在精简模式下会失效，需提前归一化为扁平结构 - 如果表格有排序/分页，小屏版必须同步维护状态，不能只改视图不改数据源
真正的难点不在怎么写代码，而在决定哪三列算“关键”——这得和产品、用户一起确认，而不是开发拍脑袋定。
