如何仅将一个表格列转换为响应式答案

【问题标题】：How to transform only one table column into responsive如何仅将一个表格列转换为响应式
【发布时间】：2017-12-22 05:27:22
【问题描述】：

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

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

如何修复它并在小屏幕上显示完整的表格？只有@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>

【问题讨论】：

标签： html-table responsive-design css-tables

【解决方案1】：

当你说width:100%被忽略时，你的意思是表格的宽度变得大于屏幕宽度，并且出现了水平滚动条吗？

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

但请注意，Firefox 似乎不支持在表格单元格上溢出：自动。如果您需要支持 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>

【讨论】：