html - 表格单元格中的 div 比父级长

Question

我希望表格单元格中的三个 div 排成一行，最后一个如果不合适则缩写: https://jsfiddle.net/prwrjy6r/1/

<table>
<tr>
  <td id="tablecell">
    <div id="asd">
      test
    </div>
    <div id="qwe">
      1234123
    </div>
    <div id="yxc">
      long text this is
    </div>
  </td>
</tr>
</table>

#asd {
  width: 4em;
  display: table-cell;
}
#qwe {
  width: 4em;
  display: table-cell;
}
#yxc {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tablecell {
  width: 10em;
  border: solid;
}

表格单元格的大小应该是 50%，但是当我尝试这样做时，最后一个 div 扩展了整个单元格的大小。

Answer 1

这是你想要做的吗？

.asd {
  width: 3em;
  float: left;
}

.qwe {
  width: 5em;
  float: left;
}

.yxc {
  width: 2em;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tablecell {
  width: 10em;
  border: solid;
  white-space: nowrap;
}

#tablecell:after {
  content: '';
  clear: both;
  display: block;
}

<table>
  <tr>
    <td id="tablecell">
      <div class="asd">
        test
      </div>
      <div class="qwe">
        1234123
      </div>
      <div class="yxc">
        long text this is hellow
      </div>
    </td>
  </tr>
</table>