将min-width设置为内容宽度

Question

我有一个背景包含一个表格的div.我希望div具有100%的宽度,除非它比表长的窄.我可以这样做:

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

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

有关正在发生的事情的视觉效果,请参见此处.我想要的是绿色背景在表格中的文本时溢出视口.

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/