如何像表格一样弯曲列宽

Question

我有一个类似于包含 3 列的表格的布局。 第一列为40px，第二列为自动宽度，第三列为rest可用宽度。 当 hover 时，行应突出显示，并具有点击侦听器。

---

尝试使用表格和网格框布局。 但是还是有一些问题。

桌子：

1. table-layout：固定，无法获得真正的 rest 宽度。
2. 表格布局：自动，不能设置表格的最大宽度。

网格：

1. 用行包裹单元格，列不能是相同的宽度（不对齐）。
2. 展开，无法设置行事件和样式。

那么，是否有任何解决方案来解决这些问题。

代码笔： https://codepen.io/Woody-lxf/pen/dyOQezE

<section style="width:300px">
 <main>
  <div class="row">
   <div class="col1"><input type="checkbox"/></div>
   <div class="col2">type: checkbox <br/> value:1111111</div>
   <div class="col3">The Description 11111111</div>
  </div>
  <div class="row">
   <div class="col1"><input type="radio"/></div>
   <div class="col2">type: radio <br/> value:2</div>
   <div class="col3">The Description 22222222222222222222</div>
  </div>
 </main>
 <hr/>
 <main class="table">
  <div class="tr">
   <div class="td1"><input type="checkbox"/></div>
   <div class="td2">checkbox <br/> value:1</div>
   <div class="td3">The Description 11111111</div>
  </div>
  <div class="tr">
   <div class="td1"><input type="radio"/></div>
   <div class="td2">radio <br/> value:2</div>
   <div class="td3">The Description 22222222222222222222</div>
  </div>
 </main>
</section>

main{
 background:#f7f7f7;
}
main *{
 box-sizing:border-box;
}
.row{
 display:grid;
 grid-template-columns: 40px minmax(min-content, 40px) auto;
 width:100%;
 cursor:pointer;
}
.row:hover{
 background:#e6e7e8;
}
.row>*{
 padding:4px 8px;
 white-space:nowrap;
}
.col3, .td3{
 overflow:hidden;
 text-overflow:ellipsis;
}


.table{
 width:100%;
 table-layout:fixed;
 display:table;
}
.tr{
 display:table-row;
 cursor:pointer;
}
.tr:hover{
 background:#e6e7e8;
}
.tr>*{
 display:table-cell;
 padding:4px 8px;
 white-space:nowrap;
}
.td1{
 width:40px;
}

Answer 1

不是 100% 确定你想要什么，但如果我理解正确的话，可以用 flex 来完成：

           <div className="container">
                <div className="column1" />
                <div className="column2" />
                <div className="column3" />
            </div>

而 css 就像这样：

.container {
  height: 80vh;
  width: 80vw;
  margin: auto;
  display: flex;
  padding: 5px;
}

.column1 {
    background: lightgreen;
    height: 100%;
    width: 250px;
}

.column2 {
    background: lightcoral;
    height: 100%;

}
.column2:hover {
    background: lightgreen;
}
.column2:active {
    background: yellow;
}
.column3 {
    background: lightblue;
    height: 100%;
}