使表格单元格宽度恒定高度
背景：我正在使用一个照片购物车，它会自动从 php 生成基于表格的图库，从而限制了我太多的灵活性。我也是新手。
问题：图库提供的表格单元格的高度可以适应内容。当我有一整行水平缩略图时，表格单元格又短又宽，而当一行包含垂直缩略图时，单元格要高得多。我希望单元格都是方形的，缩略图位于中间。
我可以访问样式表中的输入 CSS，以及一小部分 HTML 输入，但此 HTML 插入到各个缩略图表单元格内；我无权编辑主表 HTML。我使用 firebug 发现了许多组件的类和 ID 名称。
我尝试过的：我尝试插入固定大小的 DIV，但表格仍然占用实际图像未占用的任何垂直空间。我尝试将一个透明的PNG文件（180px x 180px）插入一个div（这可以强制使用正确大小的单元格），然后将缩略图（150px x 150px）放入另一个div中，并与z索引、相对值混淆/绝对定位等，但我从来没有让两个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">
Background: I'm using a photo shopping-cart that automatically generates a tables-based gallery from php, thus limiting me from too much flexibility. I'm also a novice.
Problem: The gallery puts out table cells that adapt in height to the content. When I have a full row of horizontal thumbnails the table cells are short and wide and when a row contains a vertical thumbnail, the cells are much taller. I want the cells to all be square, with the thumbnail sitting right in the middle.
I have access to input CSS in the style sheet, as well as a small section of HTML input but this HTML is inserted inside the individual thumbnail table cells; I have no access to edit the main table HTML. I have discovered class and ID names for many components using firebug.
What I've tried: I've tried to insert DIVs of a fixed size but the table still eats up any vertical space not occupied by the actual image. I've tried inserting a transparent PNG file, 180px x 180px into a div (which works to force the right size cells) and then put the thumbnail image (which is 150px x 150px) into another div and mess with z-indexing, relative/absolute positioning, etc. but I never got the two divs to stack on top of each other. Absolute positioning always aligned all 50 thumbnails to the top left corner of the page, not the table cell. Right now, the thumbnail div always comes up directly below the PNG div causing the table cell to be way too tall.
I'm stuck because I've tried everything within my skill-set and exhausted my googling. I think what I need is a way to either force the table cells to stay a certain height or find a way to make the thumbnail image overlay on top of the PNG.
Here is my current code, which is putting a 180x180 PNG (to force the table to the correct dimensions) in one div, and the thumbnail image in a second div, below the first div. Please excuse my sloppiness as I'm in no way a professional, just a tinkerer!
HTML inserted into individual table cells
<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>
And I have access to these additional classes & ids:
<table class="thumbnails_table">
<td class="thumbnails_cells">
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为你可以用纯 CSS 来做到这一点，而不必在 TD 中添加 HTML（当然除了图像标签）：
这就是我所需要的，因为我的测试图像已经垂直居中（我认为考虑到它在 TD 中 - 默认 CSS 等等）。
希望这有帮助！
I think you can do this with pure CSS, without having to add and HTML (besides the image tag, of course) into the TDs:
This is all it takes for me, 'cause my test image was already centred vertically (I think on account of its being inside a TD - default CSS and whatnot).
Hope this helps!
好吧，我明白了......如此简单，但是嘿，当你以前从未这样做过时......
基于另一个线程中的好建议：
OK, I got this figured out...so simple, but hey when you've never done it before...
Based on good advice in another thread: