如何使用display：flex在CSS中創建混合的固定寬度和動態比例寬度的列？

Question

我是一個新的遲到者關於display:flex事情在CSS中。我想創建一個帶有9列的表格，其中我希望某列具有固定寬度，並且某列具有與其他動態比例寬度列相對的動態比例寬度。所有內容將始終爲一行，並且溢出內容將被省略號截斷。至於現在，我使用JavaScript插件來做到這一點。但是當我意外地陷入這display:flex之後，我想我會改變它，因爲如果表格很大，使用javascript非常重。

但我很困惑如何做到這一點。基本上我讀到，你需要有容器（<tr>？）和display:flex，其中列（<td>？）獲得訂單價值。

我需要的是這樣的： 西1：100px的 西2：100px的 西3：200像素 山口4：15％的剩餘的動態長度 第5欄：20％的剩餘的動態長度 欄6：35 ％的剩餘動態長度 第7欄：40％的剩餘的動態長度 第8欄：100px的 山口9：250像素

而我的代碼是一個簡單的表：

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

我如何添加顯示器的flex事物？我是否需要爲每個<tr>添加樣式屬性/類屬性到每個<td>？

Answer 1

Flexbox並非真正用於桌子上。如果你確實需要使用flexbox，那麼你最好用div來重建這些事情。

此外，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