Question

我有一个背景包含一个表格的div。我希望div具有100％的宽度，除非它比表长的窄。我可以这样做：

.my-div {
  width:100%;
  min-width:900px;
}

这对于900px宽的表来说非常棒，但如果它比那个窄，我会有不需要的滚动条，如果它比那更宽，我会有无法访问的内容。显然，这可以通过JavaScript轻松解决，但我想知道是否有一个只有CSS的解决方案，所以我的应用程序不是那么重JS。

要了解正在发生的事情，请参阅here。我想要的是当表格中的文字出现时，绿色背景会溢出视口。

Answer 1

如果我理解你的问题，这应该会有所帮助：

.my-div {
  /*width:100%;*/
  height:400px;
  background-color:#bada55;
  display: inline-block; // this is the key
}

您在此处修改了示例：http://jsfiddle.net/nvLnodLh/

Answer 2

怎么样......

.my-div {
    overflow: auto;    
}

table {
    float: left;
}

现场演示： http://jsfiddle.net/WTwdN/4/

Answer 3

我想要的是，当表格中的文字出现时，绿色背景会溢出视口。

你只需将一个表包装在一个表中，这样它们就会溢出。

.my-div {
  width:100%;
  height:400px;
  display: table;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
}
table {
  width: 100%;
}

<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

如果您不希望容器div比视口大，只需在桌面上设置背景。

.my-div {
  width:100%;
  height:400px;
}
table {
  height: 100%;
  width: 100%;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
  vertical-align: top;
}

<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

Answer 4

有一个CSS Intrinsic & Extrinsic Sizing Module Level 3 的草稿添加了width: fit-content，它完全符合您的要求。但IE / Edge不支持它。

将min-width设置为内容宽度

4 个答案: