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>

希望这有帮助

表：展开列以适合宽度，但将行高保持为单行

1 个答案: