html表格支持响应,HTML表格响应100％宽度(HTML table responsive 100% width)

HTML表格响应100％宽度(HTML table responsive 100% width)

我正在尝试通过在较小的屏幕尺寸下提供2 tds 100％宽度来响应一个简单的HTML表格，至此我已有此...

.test1{

background:teal;

text-align:center;

padding:20px;

}

.test2 {

background:tan;

padding:20px;

text-align:center;

}

Test Content

Test Content

我试图将宽度更改为100％，但这不适用于我，在CSS中这样做的最简单方法是什么？ 我无法控制生成的HTML表格。

我可以将Flexbox样式应用于表格吗？

I am trying to make a simple HTML table responsive by giving the 2 tds 100% width at smaller screen sizes, I have this so far...

.test1{

background:teal;

text-align:center;

padding:20px;

}

.test2 {

background:tan;

padding:20px;

text-align:center;

}

Test Content

Test Content

I have tried changing the width to 100% but that isn't working for me, what is the easiest way of doing this in CSS only? I have no control over the HTML table that is generated.

Can I apply flexbox styling to a table?

原文：https://stackoverflow.com/questions/47077837

更新时间：2020-01-27 08:07

最满意答案

您可以使用媒体查询然后更改宽度屏幕大小

.test1 {

background: teal;

text-align: center;

padding: 20px;

}

.test2 {

background: tan;

padding: 20px;

text-align: center;

}

@media (max-width: 700px) {

.test1, .test2 {

width: 100% !important;

float: left;

}

}

Test Content

Test Content

所以当宽屏幕最大700px然后

然后再超过700px

您可以根据需要添加更多媒体查询。

了解更多信息

you can use media query then change your width screen size

.test1 {

background: teal;

text-align: center;

padding: 20px;

}

.test2 {

background: tan;

padding: 20px;

text-align: center;

}

@media (max-width: 700px) {

.test1, .test2 {

width: 100% !important;

float: left;

}

}

Test Content

Test Content

so when width screen max 700px then

and when more then 700px then

you can add more media query as your requirement .

For more information

相关问答

看来我发现了这个问题。 表中有这个CSS .ui-table-reflow.ui-responsive {

display: table-row-group;

}

如果你删除这个或改变显示：表。 表开始占据整个宽度。 It seems I found the problem. The table has this css .ui-table-reflow.ui-responsive {

display: table-row-group;

}

And if you remove this o

...

如果要使用宽度大于960px的宽度，则Bootstrap网格是一个选项，因此您无需重新发明轮子。 Bootstrap 3正在发布中，当网格类发生变化时，您仍然可以获得响应式全页面布局或响应式布局，最大宽度为1200px 整页网格的示例 最大1200px网格的示例 Foudation曾经有大约1100px的最大网格选项，但据我所知，开箱即用的基础4最大值现在大约为1000px。 通过使用.row类的宽度的自定义设置，应该很容易改变这一点 至于你的问题 我的想法不应该是媒体查询的最大尺寸是100％页面

...

为了使

元素可滚动，我们需要更改在页面上显示的方式，即使用display: block; 将其显示为块级元素。 因为我们改变了tbody的display属性，所以我们应该改变thead元素的属性，以防止破坏表格布局。 所以我们有： thead, tbody { display: block; }

tbody {

height: 100px; /* Just for the demo */

overflow-y: auto; /* T

...

你设置了一些在手机或平板电脑上不受欢迎的边距。 您需要为移动设备删除它们才能拥有全宽菜单。 @media screen and (max-width: 768px) {

.nav-menu {

margin: 0;

}

nav ul {

margin: 0;

padding: 0;

}

nav ul li {

margin-right: 0;

}

}

JSFiddle DEMO 同时删

...

你有两个问题： 此css规则的宽度样式导致拉伸问题。 它将始终覆盖您现有的样式，因为id的优先级高于类选择器： #upload-container ul li span {

font-size: 16px;

line-height: 22px;

display: block;

width: 82%; //

position: absolute;

bottom: 13px;

}

第二步为.show-use

...

您可以使用媒体查询然后更改宽度屏幕大小 .test1 {

background: teal;

text-align: center;

padding: 20px;

}

.test2 {

background: tan;

padding: 20px;

text-align: center;

}

@media (max-width: 700px)

...

图像无法缩放的原因是因为它没有viewBox。 您正在链接到元素。 该组位于具有viewBox的SVG内，但不会使用该viewBox。 浏览器将在最外层的元素上查找viewBox。 那个元素没有。 为了证明我的观点，将wins-cup viewBox复制到root / outermost 元素。 SVG现在将扩展到100％。

...

使用CSS： .horizontal-scroll {

overflow: hidden;

overflow-x: auto;

c

...