html - 第一列最小宽度的响应表；第二列拉伸(stretch)；第三列总是在最后；我怎样才能做到这一点？

Question

我需要一个 html 表格

下面的模型显示了应该涵盖哪些情况。

1. 表格不应溢出屏幕，即使在小型设备上也是如此(移动支持)
2. 第一行应尽可能小(宽度)； smalles 宽度是其中最大元素的宽度
3. 第二列应该覆盖其余空间
4. 第三列应该总是在末尾并且应该尽可能小(就像第一列一样)
5. 行高应该是动态的
6. 一行的所有单元格应在一行/应具有相同的高度

我已经用 flex 和 table 试过了

• 使用 table 我遇到的问题是第二列没有响应(固定表格)或者它溢出屏幕，因为第二列的内容太大并且没有中断或收缩
• 使用 flexbox 我没有得到相同的第一列，即使宽度不同，内容长度也不同

一些特色菜

• 第一列应该包含时间，问题是 3:00 和 10:00 的宽度不一样，我不想要静态宽度因为那会浪费空间或者对于其他语言环境来说太小了
• 第二列应该包含元素(div(称为 chip 的自定义组件))，如果知道最大宽度，这些元素可以收缩和破坏
• 第三列用于操作 - 始终保持宽度尽可能小，以便第二列有足够的空间

编辑 15/01/2020

第二列中的那些元素不应中断，表格不应在移动 View 中滚动。否则第二列中的所有元素都应该被截断。

我已经找到了解决方案(如下)，但如果有人在没有网格的情况下得到相同的结果 - 不客气!

Answer 1

如果我没理解错你可以试试这个:

<table class='table'>
  <thead>
    <th class='time'>time</th>
    <th class='text'>information</th>
    <th class='actions'>actions</th>
  </thead>
  <tbody>
    <tr>
      <td>04:00</td>
      <td>
          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit consequat dui, id lacinia est. Integer blandit, felis nec condimentum ornare, ex diam cursus leo, id rutrum dolor nibh vel libero. Integer ut augue semper, convallis libero id, finibus ipsum. Cras nec metus bibendum, dictum mi ut, ullamcorper lectus.           </span>
      </td>
      <td>
        <button>Action</button>
      </td>
    </tr>
  </tbody>
</table>


.table
  text-align: left
  width: 100%
  .time 
    min-width: 30px
    max-width: 50px
  .actions
    min-width: 80px //This value is a example

您可以测试:https://codepen.io/AlissonRGalindo/pen/VwYdMRm