使表格单元格恒定宽度&高度

本文介绍了使表格单元格恒定宽度&高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

背景:我正在使用图片购物车，该购物车会自动从php生成基于表格的画廊，从而限制了我的灵活性.我也是新手.

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.

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

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.

我尝试过的方法:我尝试插入固定大小的DIV，但是表格仍会占用实际图像未占用的任何垂直空间.我试过将一个180px x 180px的透明PNG文件插入一个div(用于强制使用正确大小的单元格)，然后将缩略图图像(150px x 150px)放入另一个div，并与z-indexing相对/绝对定位等，但我从未将两个div叠加在一起.绝对定位始终将所有50个缩略图对齐到页面的左上角，而不是表格单元格.现在，缩略图div总是直接出现在PNG div的正下方，从而导致表格单元格太高.

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.

我之所以陷入困境，是因为我已经尽力尝试了所有技能，并且筋疲力尽.我认为我需要的是一种方法，要么迫使表格单元格保持一定的高度，要么找到一种使缩略图图像覆盖在PNG顶部的方法.

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.

这是我当前的代码，它在一个div中放置一个180x180 PNG(以将表格强制设置为正确的尺寸)，在第一个div下面的第二个div中放置缩略图.请原谅我的草率，因为我绝不是专业人士，只是个修补匠！

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插入到单个表格单元格中

HTML inserted into individual table cells

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

我可以访问这些附加的课程&ID:

And I have access to these additional classes & ids:

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

推荐答案

我认为您可以使用纯CSS做到这一点，而不必在TD中添加HTML(当然，除了image标签):

I think you can do this with pure CSS, without having to add and HTML (besides the image tag, of course) into the TDs:

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

这就是我要做的所有事情，因为我的测试图像已经垂直居中(我认为它位于TD内-默认CSS等).

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).

希望这会有所帮助！