Chrome中的CSS表格单元格 [英] CSS Table Cell In Chrome

问题描述

我有一段在IE和Firefox中正常工作的代码。它在显示器中有3个表格单元格：表格;包装。中间单元具有固定宽度和背景图像，左侧和右侧单元没有宽度和纯色。在firefox中，即左边和右边的列展开以填充剩余的空间，如表格所示......但在Chrome中，这两个单元格根本不显示宽度。

I have a piece of code that works fine in IE and Firefox. It has 3 table cells inside a display:table; wrapper. The middle cell has a fixed width with a backround image, and the left and right cells have no width and a solid colour. In firefox and ie the left and right columns expand to fill the remaining space, as a table would...but in chrome these two cells are showing no width at all.

我需要它扩展左右列以填充中心单元格左侧和右侧的剩余空间。

I need it to expand the left and right columns to fill the remaining space on the left and right of the centre cell.

CSS

#navbar{
    width:100%;
    height:43px;
    border-bottom:2px solid #ffffff;    
    display:table;
}

#navbar #left{
    display:table-cell;
    background:#fcb316;
}

#navbar #middle{
    display:table-cell;
    width:1024px;
    height:43px;
    background:url(images/nav-bg.jpg) no-repeat;
}

#navbar #right{
    display:table-cell;
    background:#8cc63f;
}

HTML

<div id="navbar"> 
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
</div>

推荐答案

添加 table-layout：固定; 至 #navbar 。

这解决了问题，因为：

http：/ /www.w3.org/TR/CSS2/tables.html#fixed-table-layout

在固定表中布局算法中，每列的宽度是
，如下所示：

In the fixed table layout algorithm, the width of each column is determined as follows:

1. 列值不是'auto'对于'width'属性设置该列的宽度。


2. 否则，第一行中'width'属性值不是'auto'的单元格会确定该栏。如果
   单元格跨越多个列，则宽度会分配到
   列中。


3. 其余任何列均等分隔剩余的水平表空间（减去边框或单元格间距）。

这篇关于Chrome中的CSS表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！