如何显示没有文本的表格单元格（TD）？

Question

我的问题：

如何使表格中的单元格（TD）没有内容，但不让它消失。

我使用以下HTML代码：

<div id="push_down"></div>

    <div id="global_wrapper">
       <table cellpadding="0" cellspacing="0" border="0" id="sep_table">
           <tr>
              <td id="side_1"></td>
              <td id="main"></td>
              <td id="side_2"></td>
           </tr>
      </table>
    </div>

这是CSS代码：

html, body {
margin: 0px;
padding: 0px;
}

#push_down {
    padding-top: 53px;
}
#global_wrapper {
}
#sep_table {
    margin: 0px auto;
    width: 100%;
}
#side_1 {
    background:url(../images/navbar-bg-left.jpg) center repeat-x;
    height:78px;
}
#main {
    background:url(../images/navbar.jpg) center no-repeat;
    height:33px;
    width: 989px;
    padding-top:45px;
}
#side_2 {
    background:url(../images/navbar-bg-right.jpg) center repeat-x;
    height:78px;
}
.navbar{
    font-size:14px;
    font-weight:bold;
    color:#FFF;
}
.navbar a:link{
    color:#FFF;
    text-decoration:none;
}
.navbar a:visited{
    color:#FFF;
    text-decoration:none;
}
.navbar a:hover{
    color:#131313;
    text-decoration:none;
}
.navbar a:active{
    color:#FFF;
    text-decoration:none;
}

- Jasp3r_

Answer 1

使用CSS：

table {
empty-cells:show;
}

在 html（不太干净的）中：

<table>
<tr>
<td>&nbsp;</td>
</tr>
</table>

- easwee

---

如果单元格中有  ，则应在任何地方都起作用。 - Kalle H. Väravas

@Ixecube - 尝试添加Ixecube border-collapse: collapse来修复Chrome。 - easwee

@easwee 这个方法不起作用，我还是会继续使用透明图片的方案。这个方案似乎是最好的，不过还是谢谢你的帮助 :) - Jasp3r_

@Ixecube，它实际上可以在有或没有边框折叠的情况下正常工作 - 您必须有某些干扰您样式的东西。请检查示例测试页面：http://www.easwee.net/css/emptycelltest/ - easwee

Answer 2

你还可以放置一张透明的图片（比如.png格式），高度为1像素，宽度为1像素。

Photoshop在保存为Web和设备时，在表格容器中使用space.png作为辅助图像，你可以借鉴这个思路。

记得将这张图片的高度和宽度都设置为100%，以填满所有表格单元格。

- Natasha Kaweski

Answer 3

你可以添加这个样式：

td{
    width: 20px;
    height: 20px;
    display: block;
}

- kleinohad

---

那会使所有的td都成为固定高度，他可能不想要这样。 - easwee