如果需要，使表格单元格占用尽可能多的空间和省略号

Question

我无法按照我想要的方式工作。我使用的div元素的展示风格为table，row，cell。

我想要实现的是先修复前两个细胞，第三个细胞应该扩展直到达到界限。第四个单元格应该缩小到内容的大小。

简而言之，这些是我试图实现的细胞锚：

cell1 - left, right  
cell2 - left, right  
cell3 - left  
cell4 - right

我希望cell3在文本到达右边界时开始椭圆化。

首次尝试

.ul {
  overflow: visible;
  list-style-type: none;
  padding: 0px;
}

.li {
  margin-bottom: 9px;
  background-color: #FFF;
  height: 30px;
  border: solid 1px;
  padding: 20px 5px 10px 10px;
  margin-top: 10px;
  margin-left: 7px;
  margin-right: 8px;
  position: relative;
  cursor: default;
}

.table {
  display: table;
  margin: 0px;
  width: 100%;
}

.row {
  display: table-row;
}

.cell1 {
  width: 50px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background-color: #bbb;
}

.cell2 {
  min-width: 30px;
  width: 10%;
  display: table-cell;
  vertical-align: middle;
  background-color: #aaa;
}

.cell3 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: table-cell;
  vertical-align: middle;
  background-color: #999;
  width: auto;
}

.cell4 {
  display: table-cell;
  margin: -15px -20px 15px;
  vertical-align: middle;
  background-color: #888;
}

<ul class="ul">
  <li class="li">
    <div class="table">
      <div class="row">
        <div class="cell1">
          A
        </div>
        <div class="cell2">
          B
        </div>
        <div class="cell3">
          C long long long long long long long long long long long long long long long long long long long long
        </div>
        <div class="cell4">
          D
        </div>
      </div>
    </div>
  </li>
</ul>

正如您所看到的，长文本只是扩展了表格大小的cell3（C）bayond。 cell4（D）被抛出。即使它被设定为50px宽，“A”也缩小了。 B也缩小了，但看起来好像停留在min-width: 30px

第二次尝试
使用table-layout: fixed样式。

.ulc {
  overflow: visible;
  list-style-type: none;
  padding: 0px;
}

.lic {
  margin-bottom: 9px;
  background-color: #FFF;
  height: 30px;
  border: solid 1px;
  padding: 20px 5px 10px 10px;
  margin-top: 10px;
  margin-left: 7px;
  margin-right: 8px;
  position: relative;
  cursor: default;
}

.table {
  display: table;
  margin: 0px;
  width: 100%;
  table-layout: fixed;
}

.row {
  display: table-row;
}

.cell1 {
  width: 50px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background-color: #bbb;
}

.cell2 {
  min-width: 30px;
  width: 10%;
  display: table-cell;
  vertical-align: middle;
  background-color: #aaa;
}

.cell3 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: table-cell;
  vertical-align: middle;
  background-color: #999;
  width: auto;
}

.cell4 {
  display: table-cell;
  margin: -15px -20px 15px;
  vertical-align: middle;
  background-color: #888;
}

<ul class="ulc">
  <li class="lic">
    <div class="table">
      <div class="row">
        <div class="cell1">
          A
        </div>
        <div class="cell2">
          B
        </div>
        <div class="cell3">
          C long long long long long long long long long long long long long long long long long long long long
        </div>
        <div class="cell4">
          D
        </div>
      </div>
    </div>
  </li>
</ul>

如你所见，A现在已经增长到50px。 B也增长到了该行的10％。 “C”和“D”似乎宽度相等。

第三次尝试
我见过人们说“D”应该设置为width: 1px; white-space: nowrap的解决方案。

.ulc {
  overflow: visible;
  list-style-type: none;
  padding: 0px;
}

.lic {
  margin-bottom: 9px;
  background-color: #FFF;
  height: 30px;
  border: solid 1px;
  padding: 20px 5px 10px 10px;
  margin-top: 10px;
  margin-left: 7px;
  margin-right: 8px;
  position: relative;
  cursor: default;
}

.table {
  display: table;
  margin: 0px;
  width: 100%;
  table-layout: fixed;
}

.row {
  display: table-row;
}

.cell1 {
  width: 50px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background-color: #bbb;
}

.cell2 {
  min-width: 30px;
  width: 10%;
  display: table-cell;
  vertical-align: middle;
  background-color: #aaa;
}

.cell3 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: table-cell;
  vertical-align: middle;
  background-color: #999;
  width: auto;
}

.cell4 {
  display: table-cell;
  margin: -15px -20px 15px;
  vertical-align: middle;
  background-color: #888;
  width: 1px;
  white-space: nowrap;
}

<ul class="ulc">
  <li class="lic">
    <div class="table">
      <div class="row">
        <div class="cell1">
          A
        </div>
        <div class="cell2">
          B
        </div>
        <div class="cell3">
          C long long long long long long long long long long long long long long long long long long long long
        </div>
        <div class="cell4">
          D
        </div>
      </div>
    </div>
  </li>
</ul>

在这里你可以看到我有点接近我想要的东西，但仍然“D”被抛出并且没有背景颜色，所以这意味着，单元格是1px宽。再说一次，这很糟糕。它不应该小于单元格的内容，它应该都适合LI元素。

我还没有找到第四种解决方案，因为我现在迷失了，不知道我能做些什么不同。

我也无法让它与inline-block一起使用，即使它对我不好，因为内容不会垂直对齐到中间。

Answer 1

如果您想使用表格，请使用真实<table> + <colgroup> + <col>并在width标记上设置<col style="width:50px;>，您仍然需要table-layout: fixed和width: 100%。请注意，min-width或max-width可能无法正常使用表格单元格。

但是使用flexbox可以更轻松地实现这种布局，例如：

.flexbox {
  display: flex;
}

.col-1 {
  width: 50px;                    /* or flex: 0 0 50px; */
  text-align: center;
  background-color: pink;
}

.col-2 {
  min-width: 30px;
  width: 10%;                     /* or flex: 0 0 10%; */
  background-color: aqua;
}

.col-3 {
  flex: 1;                        /* take avaiable space */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: gold;
}

.col-4 {
  background-color: lightgreen;
}

<div class="flexbox">
  <div class="col-1">
    A
  </div>
  <div class="col-2">
    B
  </div>
  <div class="col-3">
    C long long long long long long long long long long long long long long long long long long long long
  </div>
  <div class="col-4">
    D
  </div>
</div>

Answer 2

使用self.tableView.sectionHeaderHeight = 0; self.tableView.sectionFooterHeight = 0; override func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat { let count = self.tableView(tableView, numberOfRowsInSection: section) if count == 0 { return CGFloat(Double.leastNormalMagnitude) } return 44.0 }

flexbox

.container {
  display: flex; 
}
 
.cell-1 {
    flex: 0 0 50px;
    background-color: #bbb;
    text-align: center;
}

.cell-2 {
    flex: 0 0 10%;
    background-color: #aaa;
}
.cell-3 {
    background-color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: auto;
}

.cell-4 {
    background-color: #888;
}