Html 表格属性宽度被忽略

Table attribute width is ignored

提问by CSchulz

My goal is to generate a html file with tables and export them into pdf.
Unfortunately I cant get the table to act like I want.

我的目标是生成一个带有表格的 html 文件并将它们导出为 pdf。
不幸的是，我无法让桌子表现得像我想要的那样。

One part of the table should display a timescale with days on the lowest row, weeks,months and years are in the rows above and have a pre-calculated colspan.

表格的一部分应在最低行显示天数，周、月和年在上面的行中，并具有预先计算的 colspan。

Only the s for the days have a width given with CSS (style="width:...").

只有天的 s 具有由 CSS ( style="width:...")指定的宽度。

The problem is that the width is totally ignored, so fields with days from 1-9 are only half as width than the others. And in follow, because the fields above size automatically because they have no width given, their size is also wrong.

问题在于宽度完全被忽略，因此天数为 1-9 的字段的宽度仅为其他字段的一半。接下来，因为上面的字段因为没有给定宽度而自动调整大小，所以它们的大小也是错误的。

alt text http://img217.imageshack.us/img217/6617/scale1x.jpg

替代文字 http://img217.imageshack.us/img217/6617/scale1x.jpg

Heres the source that is generated: http://pastebin.com/JyiqhSzs

这是生成的源代码：http: //pastebin.com/JyiqhSzs

What we tried so far:

到目前为止我们尝试过的：

• used non css (width="")
• give the other field also an calculated width (the colspan value multiplied with the width of a day)

• 使用非 css ( width="")
• 给另一个字段一个计算的宽度（colspan 值乘以一天的宽度）

Also set style="table-layout:fixed;"for the table but that has no effect.

也style="table-layout:fixed;"为桌子设置，但没有效果。

So I don't know how to get the table to have the width I want to have?

所以我不知道如何让桌子达到我想要的宽度？

回答by ScottS

Instead of width: 23pxuse min-width: 23px. It worked for IE8 and FireFox. I have not yet figured out a magic formula for IE7 to not narrow the single digit days (working on it). I do know that the table-layout: fixedis not needed, and for sure will cause issues with any IE7 display that may work.

而不是width: 23px使用min-width: 23px. 它适用于 IE8 和 FireFox。我还没有想出一个让 IE7 不缩小个位数天数的神奇公式（正在研究它）。我知道这table-layout: fixed不是必需的，并且肯定会导致任何可能工作的 IE7 显示出现问题。

Also, if you always want them to be the same size, you might consider using emsizing so that if text size changes, your table scales up/down with it proportionally. I don't know all your needs, but just a suggestion to look into.

此外，如果您始终希望它们的大小相同，则可以考虑使用em大小调整，以便在文本大小发生变化时，您的表格会随之按比例放大/缩小。我不知道您的所有需求，但只是一个建议。

Edit: More cross browser solution.IE6 and 7 need to have all the numbers in the "days" cells wrapped with a divand then instead of styling the tdwith any kind of width, style that divwith a width: 23pxnotmin-width: 23px.

编辑：更多跨浏览器解决方案。IE6 和 7 需要将“天”单元格中的所有数字都用 a 包裹，div然后用not设置样式而不是td使用任何宽度的样式。divwidth: 23pxmin-width: 23px

回答by RoToRa

Is the styleattribute mistyped as stlyein your real page, too?

该style属性是否也像stlye在您的真实页面中那样输入错误？

Some more hints:

还有一些提示：

• It's normal for table cell to shrink if the table doesn't fit on the whole page, that's how HTML tables work.
• Try table-layout: fixedafter fixing the typo.
• If it still doesn't work you'll need to add a div(or some other element) to each cell and give that the width instead
• A width in pixels won't work if the font isn't the size you expect (and no, you can't force it to a specific size). Try 2ex.
• Instead of setting the style in each and every tdwhy don't you set in the the style sheet.

• 如果表格不适合整个页面，表格单元格缩小是正常的，这就是 HTML 表格的工作原理。
• table-layout: fixed修复错别字后尝试。
• 如果它仍然不起作用，您需要div向每个单元格添加一个（或其他一些元素）并为其指定宽度
• 如果字体不是您期望的大小（不，您不能将其强制为特定大小），则以像素为单位的宽度将不起作用。试试2ex。
• td为什么不在每个样式表中设置样式，而不是在每个样式中设置样式。

Example:

例子：

<tr class="days"><td>1</td><td>2</td></tr>

tr.days td {
  width: 23px;
}

回答by Logan Young

You can't just specify "width=...", you have to change the way the CSS element displays...

您不能只指定“width=...”，您必须更改 CSS 元素的显示方式...

So lets assume we want the cell to be 30px wide:

所以让我们假设我们希望单元格是 30px 宽：

style="width: 30px !important; display: block;"

display: block; basically tells the CSS that it must resize the element based on the dimensions given in width: and height: and not based on what's actually in the element.

显示：块；基本上告诉 CSS，它必须根据 width: 和 height: 中给定的尺寸调整元素的大小，而不是基于元素中的实际内容。

However, there is a small concern with doing this that the contents of the element might stretch beyond the bounds specified by width and height, but in this type of situation, I don't think that's going to be a big issue.

但是，这样做有一个小问题，即元素的内容可能会超出宽度和高度指定的范围，但在这种情况下，我认为这不会是一个大问题。

HTH

HTH

回答by WhiteSamoyed

I solved the same issue on a similar case by setting the width at the <td>level to something a bit larger than the expected text, like:

我通过将<td>级别的宽度设置为比预期文本大一点的内容，解决了类似案例中的相同问题，例如：

<td style="width:50em">