css怎么设置最小宽度,关于CSS：将最小宽度设置为内容宽度

最新推荐文章于 2025-08-06 10:43:32 发布

转载最新推荐文章于 2025-08-06 10:43:32 发布 · 882 阅读

标签

#css怎么设置最小宽度

本文介绍了解决HTML表格中的自动换行问题及实现水平滚动的方法。通过调整CSS样式，例如设置white-space属性为nowrap，并使用overflow:auto来实现容器内的自动滚动效果。

。

谢谢，我解决了这个问题，但这不是重点。问题仍然存在。我想我只需要使用JavaScript

那就是为什么我在评论而不是答案中写它。

换行可能存在问题。看看@JoshuaClark：在HTML表中自动换行

如果我正确理解了您的问题，这应该会有所帮助：

.my-div {

/*width:100%;*/

height:400px;

background-color:#bada55;

display: inline-block; // this is the key

}

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

怎么样...

.my-div {

overflow: auto;

}

table {

float: left;

}

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

这使.my-div水平滚动。我希望整个窗口都滚动。

试试这个解决方案

.my-div {

height:400px;

overflow: auto;

background-color:#bada55;

}

td {

white-space:nowrap;

}

table {

width: 100%;

}

my tablemy table

my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaappppppppppppppppmy dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp

What I want is for the green background to overflow the viewport when the text in the table does.

您只需将表包装在表中，这样它们都会溢出。

.my-div {

width:100%;

height:400px;

display: table;

background-color:#bada55;

}

td {

white-space:nowrap;

}

table {

width: 100%;

}

my table

my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp

如果您不希望容器div增大到大于视口，则只需在表格上设置背景即可。

.my-div {

width:100%;

height:400px;

}

table {

height: 100%;

width: 100%;

background-color:#bada55;

}

td {

white-space:nowrap;

vertical-align: top;

}

my table

my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp

有CSS本质和外部大小调整模块级别3的草案

会添加width: fit-content来满足您的需求。 IE / Edge不支持它。