css 定义表格最大宽度,css – 表格单元格不接受最大宽度值

以下是您的问题的答案.我会留下旧的替代品.

问题

In CSS 2.2,the effect of ‘min-width’ and ‘max-width’ on tables,inline tables,table cells,table columns,and column groups is undefined.

所以似乎目前没有办法向表格单元格添加最大宽度.您可以在容器的每一侧添加一个表格单元格,并使用媒体查询为容器设置1500px的宽度,但这不是首选,因为有一种解决方法.

一个办法

如果你想限制link到1500px中提供的导航的宽度,你可以像你一样添加一个容器,但块结构应该有点不同.

现在你有：

>横幅作为一张桌子

>容器作为表格单元格

> header_branding和nav_primary作为单元格内的块

考虑将结构改为以下：

>横幅到一个街区

>容器到表

> header_branding和nav_primary到表格单元格

横幅只是100％宽的背景元素.

然后像容量一样给容器一个最大宽度为1500px,但也记得给它100％的宽度.另外它不会尝试扩展到屏幕的整个宽度,因为它不必,但现在最大宽度将是一个限制因素.

Here是here提供的CodePen示例,但是容器将宽度限制为1500px.

您的示例已修改：

.banner {

width: 100%;

}

.container {

max-width: 1500px;

width: 100%;

height: 160px;

margin: auto;

overflow: hidden;

display: table;

}

.header_branding,.nav_primary {

vertical-align: middle;

display: table-cell;

}

.header_branding {

width: 150px;

height: 52px;

}

.nav_primary {

text-align: right;

}

/* To make edges visible for the demo */

.banner,.container,.header_branding,.nav_primary {

background: rgba(0,0.3);

border: 1px dotted red;

}

[Menu items]