css - 将 min-width 设置为内容的宽度

Question

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

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

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

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

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 不支持它。

Answer 5

试试这个解决方案

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

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