表属性宽度被忽略

时间:2010-07-22 06:31:22

标签: html css html-table width

我的目标是生成一个包含表格的html文件并将其导出为pdf 不幸的是,我不能让桌子像我想要的那样行事。

表格的一部分应显示时间刻度,其中最低行,周,月和年的天数在上面的行中,并且具有预先计算的colspan。

只有天数的s具有CSS(style="width:...")给出的宽度。

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

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

继承人生成的来源: http://pastebin.com/JyiqhSzs

到目前为止我们尝试了什么:

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

同时为表格设置style="table-layout:fixed;"但不起作用。

所以我不知道如何让桌子有我想要的宽度?

4 个答案:

答案 0 :(得分:13)

而不是width: 23px使用min-width: 23px。它适用于IE8和FireFox。我还没有找到IE7的神奇公式,以便不缩小单个数字天数(使用它)。我知道不需要table-layout: fixed,并且肯定会导致任何可能有效的IE7显示问题。

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

编辑:更多跨浏览器解决方案。 IE6和7需要将“天”单元格中的所有数字包裹在div中,然后代替样式化{{1} td div width: 23px的任何宽度样式。

答案 1 :(得分:2)

您的真实网页中的style属性是否也被误认为stlye

更多提示:

  • 如果表格不适合整个页面,则表格单元格缩小是正常的,这就是HTML表格的工作方式。
  • 修正拼写错误后尝试table-layout: fixed
  • 如果它仍然不起作用,您需要为每个单元格添加div(或其他一些元素),然后将宽度赋予
  • 如果字体不是您期望的大小,则以像素为单位的宽度将不起作用(否则,您无法将其强制为特定大小)。试试2ex
  • 不要在每个td中设置样式,而不是在样式表中设置。

示例:

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

tr.days td {
  width: 23px;
}

答案 2 :(得分:1)

你不能只指定“width = ...”,你必须改变CSS元素显示的方式......

因此我们假设我们希望单元格宽度为30px:

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

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

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

HTH

答案 3 :(得分:0)

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

<td style="width:50em">