html - 表 : expand column to fit width, 但保持行高为单行

Question

我有一个填满其容器宽度的表格。它有三列。两列具有固定宽度，而第三列必须扩展以填充剩余宽度。表格的宽度是动态的。

如果一行的高度可能会扩展，我可以让它工作，但我需要每一行只有一行文本。如果文本太长，则必须将其截断。

代码+示例:(https://jsfiddle.net/o044tq53/5/)

编辑:我重写了上面的描述，并用一个示例更新了 jsfiddle，显示它应该是什么样子。

#wrapper {
  width:200px;
  background:white;
}
table {
  border-collapse:collapse;
  text-align: left;
  width:100%;
  margin-bottom:30px;
}
div {
  overflow:hidden;
  white-space: nowrap;
  text-align:left;
}
.td_col_two {
  width:100%;
}
.col_one_div {
  width:90px;
  background: red;
}
.col_two_div {
  background: lightblue;
  overflow:hidden;
}
.col_three_div {
  width:20px;
  background: lightgreen;
}

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <div class = "col_one_div">
        Robin
      </div>
    </td>
    <td class = "td_col_two">
      <div class = "col_two_div">
        nowrap does not work for long text.
      </div>
    </td>
    <td>
      <div class = "col_three_div">
        x
      </div>
    </td>
  </tr>
</table>

Answer 1

考虑使用 display:flex 和 flex:1(flex-grow:1)

检查这个片段

#wrapper {

  background: white;
  display: flex;
  flex-direction: column;
  border:1px solid black;
}

#wrapper table {
  flex: 1;
  width: 100%;
}

table,
tr,
td {
  border: 1px solid;
 
}

#table-two div {
 word-wrap:break-all;
}

.td_col_two {
  width: 100%;
}

.col_one_div {
  background: red;
}

.col_two_div {
  background: lightblue;


}

.col_three_div {
  width: 20px;
  background: lightgreen;
}

<div id="wrapper">
  <table id="table-one">
    <tr>
      <td>
        <div class="col_one_div">
          Robin
        </div>
      </td>
      <td class="td_col_two">
        <div class="col_two_div">
          Short works
        </div>
      </td>

      <td>
        <div class="col_three_div">
          x
        </div>
      </td>

    </tr>

  </table>


  <table id="table-two">
    <tr>
      <td>
        <div class="col_one_div">
          Robin
        </div>
      </td>
      <td class="td_col_two">
        <div class="col_two_div">
          White-space normal also works.
        </div>
      </td>

      <td>
        <div class="col_three_div">
          x
        </div>
      </td>

    </tr>

  </table>

  <table id="table-three">
    <tr>
      <td>
        <div class="col_one_div">
          Robin
        </div>
      </td>
      <td class="td_col_two">
        <div class="col_two_div">
          nowrap does not work for long text.
        </div>
      </td>

      <td>
        <div class="col_three_div">
          x
        </div>
      </td>

    </tr>

  </table>

</div>

希望对你有帮助