Html 全宽表，截断单元格

我正在用HTML创建一个表，如下所示：

表格如下：

<table class="table" style="font-size:22px; width:100%">

我想让每件东西都适合这一页的宽度。如果它不适合，那么我希望团队名称用省略号截断。这在HTML中是可能的吗

以下是我到目前为止所做的尝试：

<style>
  table td {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
  }    
</style>

表td{
溢出：隐藏；
文本溢出：省略号；
-o-text-overflow：省略号；
空白：nowrap；
}    

---

这是小提琴：

这是可能的。您只需将

max width

属性添加到

td

。像这样：

table td {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    max-width:100px;
}

---

你为什么用推特引导标记你的问题？你用它做什么？我在链接页面中使用bootstrap，不确定这是否与我的问题有关，因为TWBS也有自己的表格样式。你能设置一个fiddle吗？我有一种感觉，问题在于你的表的父div设置超出了页面的宽度，因此你的表在技术上是按照你告诉它的去做的。另外，如果你使用bootstrap，看看他们的响应表，他们有一个非常好的表，可以为你重新调整信息的大小。谢谢你，我添加了一个提琴