表格单元格中的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>