如何像表格一样弯曲列宽答案

【问题标题】：How to flex column width similar to table如何像表格一样弯曲列宽
【发布时间】：2021-06-06 22:05:38
【问题描述】：

我的布局类似于包含 3 列的表格。第一列是 40px，第二列是内容的自动宽度，第三列是剩余的可用宽度。悬停时应突出显示行，并具有点击侦听器。

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

表：

table-layout：已修复，无法获取真正的剩余宽度。
table-layout: auto，不能设置表格的最大宽度。

网格：

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

那么，有什么办法可以解决这些问题。

codepen：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;
}

【问题讨论】：

请分享您的代码

标签： css html-table flexbox css-grid

【解决方案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%;
}

【讨论】：