Question

我有一张包含各种列和固定宽度的表格。前提是应始终完全显示某些列。因此，只要表格的宽度超出容器限制，所选列将减小其宽度，以便其他列不受影响。

从这个例子中，期望的结果是第一列和最后一列始终显示其内容，而中间一列缩短为完成该内容。

＆＃13;

#content {
  border: 1px solid;
  max-width: 220px;
  overflow: hidden;
}

table th,
table td {
  white-space: nowrap;
  text-overflow: ellipsis;
}

＆＃13;

<div id="content">
  <table>
    <thead>
      <tr>
        <th>qnty</th>
        <th>desc.</th>
        <th>total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>0.2222222</td>
        <td>weigth product</td>
        <td>255555.00</td>
      </tr>
      <tr>
        <td>1</td>
        <td>prod</td>
        <td>1.00</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

可选：如果可能，缩短的列应具有text-overflow: ellipsis;行为。

其他信息我忘了提及：

在任何情况下都不能修改容器宽度。
不应显示任何滚动条，因为结果将以纸张形式打印。
tbody行的内容是动态的。因此，当单元格内容的长度使表格大于容器时（如示例中所示），问题就出现了。

Answer 1

问题不是很清楚，但我想你是想在某个屏幕宽度上隐藏中间单元格的宽度？

但这是一种可能的解决方案吗？

https://codepen.io/stefan24/pen/ZJWYXK

            #content{
            border:1px solid;
            max-width:220px;
            overflow: hidden;
        }
        table th, table td{
            white-space:nowrap;
            text-overflow: ellipsis;
        }


        @media (max-width: 1200px) {
            .mid_row {
                text-overflow: ellipsis;
                width: 30px;
                display: block;
                white-space: nowrap;
                overflow: hidden;
            }
        }


<div id="content">
<table>
<thead>
<tr>
    <th>qnty</th>
    <th class="mid_row">desc.</th>
    <th>total</th>
</tr>
</thead>
<tbody>
<tr>
    <td>0.2222222</td>
    <td class="mid_row">weigth product</td>
    <td>255555.00</td>
</tr>
<tr>
    <td>1</td>
    <td class="mid_row">product</td>
    <td>1.00</td>
</tr>
</tbody>
</table>
</div>

Answer 2

我觉得发布这个答案很糟糕，因为我仍然不明白它为什么会起作用......我只是在尝试荒谬的东西......对不起。

解决这个问题的第一部分是用th替换标题中的td（可能有一些未知的属性会弄乱所有内容）。然后将样式设置为每个标题单元width:1%;，除了中间的单元格和中间的单元格单元格max-width:0;（不要问我为什么或如何工作）。

在更新的示例中，您可以看到我打算做的事情： https://jsfiddle.net/quz7jdk8/5/

无论内容是什么，第一列和最后一列都将始终可见，同时减少中间列的宽度。

事实是它在chrome和firefox上运行稳定。

（很明显，如果first_column_length + last_column_length＆gt; container_width，预期的结果变得不可能）

如何选择缩小哪个列以适合表宽？

2 个答案: