容器内的挤压表（截断列）

Question

我有一张桌子需要塞进一个小容器中：

<table class="table table-condensed list-table small">
    <tr class="active">
        <th class="col-md-1">ABC</th>
        <th class="col-md-6">Domain</th>
        <th class="col-md-5">IP</th>
    </tr>
    <tr>
        <td class="col-md-1">2.23</td>
        <td class="domain-col col-md-6">
            kjshf78fiels9.domain-my-domain.com
        </td>
        <td class="col-md-5">127.100.100.255</td>
    </tr>
</table>

这里的完整场景：
http://jsfiddle.net/j8WvF/1/

为了能够做到这一点，我想截断 Domain 列（.domain-col 类应该处理溢出和换行）。

问题

我不能让单元格比它的内容更窄。

理想的解决方案

ABC 和 IP 两列展开到其内容的全宽，而 Domain 列占用剩余空间（并将所有表格缩小到其容器的大小。

注意：容器是可以调整大小的，所以最好是在容器变大时表格也能扩大以填满整个容器。

足够好的解决方案

为每一列分配宽度百分比（引导类col-md-*），它们会严格遵守该宽度。

Answer 1

.domain-col不能收缩的原因是你的CSS选择器造成的，不是

.domain-col {

但是

td.domain-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
}

分叉小提琴 -> http://jsfiddle.net/BafF5/

---

更新：在更新中实现您想要的：

td.domain-col {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90px;
}
td.col-md-1, td.col-md-5 {
   width:1%;
}

新分叉小提琴 -> http://jsfiddle.net/R867n/

550 像素：

250 像素：