如何只将一个表列转换为响应式

Posted 2021-05-02

我有一个包含3列的表格（用于显示专辑歌曲）。数字，曲目标题和艺术家。我想保持Number和Artist的列很小，并允许Title放置列的大部分空间。我想让它对移动设备做出响应。

我设法使用white-space: nowrap，overflow: auto和在表td中添加max-width。这在具有大显示屏的桌面中看起来很不错，但似乎在移动屏幕中width:100%中使用的table不适用，因为该表溢出了屏幕的限制。

如何修复它并在小屏幕上显示整个表格？只有@media才有可能吗？

完成的工作在这里：

table {
  width: 100%;
}

table th {
  background: #E4E4E4;
  line-height: 23px;
  padding-top: 6px;
  color: #626262;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
  border: 1px solid #DBDBDB;
}

table td {
  font-size: 13px;
  line-height: 22px;
  background: #F7F7F7;
  border-top: 1px solid #F3F3F3;
  white-space: nowrap;
  overflow: auto;
  max-width: 300px;
}

table td,
table th {
  text-align: left;
  padding: 3px 20px;
}

<table cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <th>Nº</th>
      <th class="largura-min">Title</th>
      <th>Artist</th>
    </tr>
    <tr>
      <td>1</td>
      <td>I need this column placing most of this space / Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String</td>
      <td>ARTIST</td>
    </tr>
    <tr class="even">
      <td>2</td>
      <td>TITLE 2</td>
      <td>I NEED A SMALLER ARTIST SPACE / SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST</td>
    </tr>

  </tbody>
</table>

答案

当你说宽度：100％被忽略时，你的意思是表的宽度是否大于屏幕宽度并出现水平滚动条？

以px为单位为每列提供不同的最大宽度，与您希望它们占用的空间占相同比例。我从你的例子中删除了一堆东西，只是为了让实验更容易。调整https://jsfiddle.net/dgrogan/ye2wm4yp/2/上的输出框架的大小

但请注意，Firefox似乎不支持表格单元格上的overflow：auto。如果你需要支持FF，你必须弄明白。没有测试Edge。

网格可能比表格更好地支持这个用例。

let reducer = (sum, current) => sum += current;

let cells = Array.from(document.querySelectorAll("tr:first-child td"));
let abs_widths = cells.map(cell => cell.offsetWidth);
let total_width = abs_widths.reduce(reducer);
let pct_widths = abs_widths.map(w => Math.round(1000 * w / total_width) / 1000);
let specified_widths_px = cells.map(cell => parseInt(getComputedStyle(cell).maxWidth));
let total_spec_widths = specified_widths_px.reduce(reducer);
let specified_widths_pct = specified_widths_px.map(px => Math.round(1000 * px / total_spec_widths) / 1000);
log.innerhtml = `${abs_widths}
<br>${pct_widths} <-- current column ratio
<br>${specified_widths_pct} <-- specified column ratio
`;

table {
  width: 100%;
}

table td {
  font-size: 13px;
  line-height: 22px;
  white-space: nowrap;
  overflow: auto;
  padding-right: 0px;
  outline: 1px solid lime;
}

td:nth-child(1) {
  max-width: 10px;
}

td:nth-child(2) {
  max-width: 50px;
}

td:nth-child(3) {
  max-width: 35px;
}

<table cellpadding="0" cellspacing="0">
  <tr>
    <td>Nº</td>
    <td class="largura-min">Title</td>
    <td>Artist</td>
  </tr>
  <tr>
    <td>1</td>
    <td>I need this column placing most of this space / Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String Superlong String</td>
    <td>ARTIST</td>
  </tr>
  <tr class="even">
    <td>2</td>
    <td>TITLE 2</td>
    <td>I NEED A SMALLER ARTIST SPACE / SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST SUPERLONG ARTIST</td>
  </tr>
</table>
<div id=log></div>

以上是关于如何只将一个表列转换为响应式的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段10—— 数组的响应式方法

如何将表列转换为数组？

如何将 C# DateTime 转换为 MySQL 时间戳表列

理解响应式编程

将旧的 VB.Net Web 项目转换为新的响应式项目 [关闭]

html 将以编程方式附加外部脚本文件的javascript代码片段，并按顺序排列。用于响应式网站，其中ma