Question

我是关于CSS中display:flex事情的新后来者。我想创建一个包含9列的表，其中我想要一些列具有固定宽度，并且某些列具有与其他动态比例宽度列的动态比例宽度。所有内容总是一行，溢出内容将用省略号截断。至于现在，我使用javascript插件来做到这一点。但是在我偶然发现这个display:flex之后，我想我会把它改成这个，因为如果表格很大，使用javascript非常繁重。

但我对如何做到这一点感到困惑。基本上我读过你需要容器（<tr>？）和display:flex，其中列（<td>？）获得订单价值。

我需要的是这样的事情：第1栏：100px 第2栏：100px 第3栏：200px 第4列：剩余15％的动态长度第5栏：剩余20％的动态长度第6列：剩余35％的动态长度第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>

如何添加显示器弹性物品？我是否需要为每个<td>的每个<tr>添加样式属性/类属性？

Answer 1

Flexbox并不适合在桌面上使用。如果你真的需要使用flexbox，那么你最好用div重建一下这个东西。

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

但是，您可以在现有表格中使用calc。根本不需要flexbox。

＆＃13;

* {
  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);  
}

＆＃13;

<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>

＆＃13;

Codepen Demo

如何使用display：flex在CSS中创建一个固定的和动态比例宽度列的混合？

1 个答案: