css - 如何使用显示:flex in CSS to create a mix of fixed with and dynamic proportional width columns?

Question

我是关于 display:flex 的新迟到者CSS中的东西。我想创建一个包含 9 列的表格，其中我希望某些列具有固定宽度，而某些列具有相对于其他动态比例宽度列的动态比例宽度。所有内容总是一行，溢出的内容将用省略号截断。至于现在，我使用 javascript 插件来做到这一点。但是在我不小心跌入这个display:flex之后，我想我要把它改成这个，因为如果表很大，使用 javascript 会很重。

但我对如何做到这一点感到困惑。基本上我读到你需要有容器( <tr> ？)和 display:flex ，其中列 ( <td> ?) 正在获取订单值。

我需要的是这样的:第 1 栏:100 像素第 2 栏:100 像素第 3 栏:200 像素Col 4:剩余动态长度的 15%Col 5:20% 剩余动态长度Col 6:剩余动态长度的 35%Col 7:40% 剩余动态长度第 8 列:100px第 9 列:250px

我的代码是一个简单的表格:

<table style="width:100%">
    <tr>
        <td><input type="checkbox" onclick="selectall()"</input></td>
        <td>No</td>
        <td>ID</td>
        <td>Name</td>
        <td>Address</td>
        <td>Description</td>
        <td>Notes</td>
        <td>Score</td>
        <td>Option Button</td>
    </tr>
    <tr>
        <td><input type="checkbox" id="CR-10234"></td>
        <td>1</td>
        <td>CR-10234</td>
        <td>Maxwell, Harry</td>
        <td>Harrison, Ohio</td>
        <td>IT Engineering with 3 years experience in web programming</td>
        <td>Currently stays in San Fransisco. Need 3 days in advance to book a schedule.</td>
        <td>89</td>
        <td>
             <input type="button" onclick="edit('CR-10234')">Edit</input>
             <input type="button" onclick="delete('CR-10234')">Delete</input>
        </td>
    </tr>
</table>

如何添加 display flex 东西？我是否需要为每个 <td> 添加样式属性/类属性？对于每个 <tr> ？

Answer 1

Flexbox 并不是真正为在表格上使用而设计的。如果你真的需要使用 flexbox，你最好用 div 重建 whiole 东西。

此外，flexbox 不会自动执行剩余宽度的百分比

您可以在现有表上使用 calc。根本不需要 flexbox。

* {
  box-sizing: border-box;
}

table {
  width: 100%;
  margin: 10px 0;
  border:1px solid grey;
}

td:nth-child(1), 
td:nth-child(2), 
td:nth-child(8)  {
width: 100px;   /* total 300px */
background: plum;
}

td:nth-child(3) {
width: 200px; 
  background: #c0ffee;
}

td:nth-child(9) {
width: 250px;  
}

/* total fixed widths = 750px */

td:nth-child(4) {
width: calc((100% - 750px) * .15);  
  background: #bada55;
}

td:nth-child(5) {
width: calc((100% - 750px) * .2);  
}

td:nth-child(6) {
width: calc((100% - 750px) * .35);  
}

td:nth-child(7) {
width: calc((100% - 750px) * .45);  
}

<table>
    <tr>
        <td><input type="checkbox" onclick="selectall()"</input></td>
        <td>No</td>
        <td>ID</td>
        <td>Name</td>
        <td>Address</td>
        <td>Description</td>
        <td>Notes</td>
        <td>Score</td>
        <td>Option Button</td>
    </tr>
</table>

Codepen Demo