CSS 表格在某些浏览器上正在调整大小

标签 css resize width css-tables

我有一个包含四列的表格。第一列和第三列的宽度必须为 132 像素。如果您在资源管理器中看到该页面,则两列均符合指定的宽度。但是在 Firefox 和 Chrome 上,列长到 206px,我不希望发生这种情况。

Styles of Columns

表格

Style of table

我已经用 table-layout: fixed 设置了表格。我已经将这些 td 的宽度、最小宽度和最大宽度指定为 132px,但浏览器会继续按照他们喜欢的方式执行。

你能帮帮我吗?

更新

fiddle :jsfiddle.net/65o82kv0

列的 CSS

.cabecera {
    width: 132px;
    color: white;
    max-width: 132px;
    min-width: 132px;
    padding: 8px 12px;
    font-weight: bolder;
    white-space: nowrap;
    background-color: #82005E;
}

表格的 CSS

#bloqueVehiculo table,
#bloqueTren table,
#bloqueIncidencia table,
#bloqueMantenimiento table,
#bloqueClasificacion table,
#bloqueEstado table,
#selectorVehiculo table {
    width: 95%;
    margin: 23px auto;
    table-layout: fixed;
}

Explorer 上的表格图像 enter image description here

Chrome 上的表格图片:

enter image description here

最佳答案

  1. 并非每个浏览器在 CSS 和解释样式表的方式方面都是等效的。
  2. 您可以指定一个固定大小的容器,并将表格作为其子元素,以使大小在浏览器中保持一致。
  3. 请检查是否有任何内联 CSS,因为它们有时会覆盖您可能拥有的外部 CSS 文件。

关于CSS 表格在某些浏览器上正在调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44842810/

相关文章:

css - 禁用 div 内容错误

html - 从 div 中心的 CSS 过渡宽度和高度

c# - 最小化WPF中的窗口?

屏幕大小调整时 HTML/CSS 元素会移动

javascript - CSS 网站比浏览器窗口宽

css 设置相对于 div 内页面的大小

c# - 如何将 .net 图表宽度更改为 %100

JavaScript 游戏 - 无法通过 0.5 像素偏移和错误边界渲染进入中心圆圈

jquery - 在 bootstrap 日期选择器中突出显示整个 <tr> 周

windows-phone-7 - Windows Phone 7 键盘尺寸