使表格单元格恒定宽度和高度答案

【问题标题】：Making a table cell constant width & height使表格单元格恒定宽度和高度
【发布时间】：2011-06-19 15:47:30
【问题描述】：

背景：我正在使用一个自动从 php 生成基于表格的画廊的照片购物车，因此限制了我太多的灵活性。我也是新手。

问题：图库中的表格单元格的高度与内容相适应。当我有一整行水平缩略图时，表格单元格又短又宽，而当一行包含垂直缩略图时，单元格要高得多。我希望所有单元格都是方形的，缩略图位于中间。

我可以访问样式表中的输入 CSS，以及一小部分 HTML 输入，但此 HTML 插入到单个缩略图表单元格中；我无权编辑主表 HTML。我使用 firebug 发现了许多组件的类和 ID 名称。

我尝试过的：我尝试过插入固定大小的 DIV，但表格仍然会占用任何未被实际图像占用的垂直空间。我尝试将透明的 PNG 文件，180px x 180px 插入一个 div （这可以强制正确大小的单元格），然后将缩略图（这是 150px x 150px）放入另一个 div 并弄乱 z-indexing，相对/absolute 定位等，但我从来没有让两个 div 堆叠在一起。绝对定位始终将所有 50 个缩略图对齐到页面的左上角，而不是表格单元格。现在，缩略图 div 总是出现在 PNG div 的正下方，导致表格单元格太高。

我被困住了，因为我在我的技能范围内尝试了所有方法并且用尽了我的谷歌搜索。我认为我需要一种方法来强制表格单元格保持一定高度或找到一种方法使缩略图图像覆盖在 PNG 之上。

这是我当前的代码，它将 180x180 PNG（以强制表格的尺寸正确）放在一个 div 中，并将缩略图放在第一个 div 下方的第二个 div 中。请原谅我的马虎，因为我绝不是专业人士，只是一个修补匠！

HTML 插入单个表格单元格

<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>

而且我可以访问这些额外的类和 ID：

<table class="thumbnails_table">
<td class="thumbnails_cells">

【问题讨论】：

哇，我把这件事弄得很复杂。我在另一个线程的帮助下自己弄清楚之前就寻求帮助。

标签： html html-table alignment z-index centering

【解决方案1】：

我认为您可以使用纯 CSS 来做到这一点，而无需在 TD 中添加 HTML（当然，除了图像标签）：

td.thumbnails_cells {
    width: 180px;
    height: 180px;
    text-align: center;
}

这就是我所需要的，因为我的测试图像已经垂直居中（我认为是因为它位于 TD 内 - 默认 CSS 等等）。

希望这会有所帮助！

【讨论】：

我一开始尝试了这种技术，但它没有保持高度......也许我把它搞砸了。
好的，我刚刚从我的答案中取出了所有其他的东西，然后把它放进去，效果很好。我不知道我是怎么搞砸的......可能是因为它太容易了！
不用担心 - 没有人会想，“好吧，那行不通。让我们尝试一些简单复杂的东西。”不过，您很幸运，您以 TD 为中心——在其他任何地方，这几乎是不可能的。干杯！

【解决方案2】：

好的，我想通了...很简单，但是当您以前从未做过时...

基于另一个帖子中的好建议：

<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>

【讨论】：