2017-08-03 56 views
1

我无法创建没有包装的固定大小的表格。我曾尝试在很多地方寻找,但找不到解决此问题的方法。我发布了我认为似乎是问题的代码。html td标签不尊重表格中的宽度

下面是表布局我想获得:

<table style="border: 1px solid black; table-layout:fixed; border-collapse:collapse;"> 
 
<tr> 
 
\t <th width="230px" rowspan="3" colspan="1" style="border: 1px solid black;">0 
 
    </th> 
 
    <td width="230px" colspan="6" style="border: 1px solid black;">1 
 
    </td> 
 
</tr> 
 
<tr> 
 
\t <td colspan="3" style="border: 1px solid black;">8 
 
\t </td> 
 
\t <td colspan="3" style="border: 1px solid black;">9 
 
\t </td> 
 
</tr> 
 
<tr> 
 
\t <td width="41" style="border: 1px solid black;">14 
 
\t </td> 
 
\t <td width="25" style="border: 1px solid black;">15 
 
\t </td> 
 
\t <td width="25" style="border: 1px solid black;">16 
 
\t </td> 
 
\t <td width="25" style="border: 1px solid black;">17 
 
\t </td> 
 
\t <td width="25" style="border: 1px solid black;">18 
 
\t </td> 
 
\t <td>19 
 
\t </td> 
 
</tr> 
 
</table>

从本质上讲,在上表中,盒0,1,8,9日和14 - - 18是固定宽度,19允许根据其他固定宽度改变尺寸。但是,使用此表格,尽管有layout:fixed,但整个表格仍会随窗口调整大小。为了解决这一点,我试过包括width="460px"

<table style="border: 1px solid black; table-layout:fixed; border-collapse:collapse;" width="460px"> 
 
<tr> 
 
\t <th width="230px" rowspan="3" colspan="1" style="border: 1px solid black;">0 
 
    </th> 
 
    <td width="230px" colspan="6" style="border: 1px solid black;">1 
 
    </td> 
 
</tr> 
 
<tr> 
 
\t <td colspan="3" style="border: 1px solid black;">8 
 
\t </td> 
 
\t <td colspan="3" style="border: 1px solid black;">9 
 
\t </td> 
 
</tr> 
 
<tr> 
 
\t <td width="41" style="border: 1px solid black;">14 
 
\t </td> 
 
\t <td width="25" style="border: 1px solid black;">15 
 
\t </td> 
 
\t <td width="25" style="border: 1px solid black;">16 
 
\t </td> 
 
\t <td width="25" style="border: 1px solid black;">17 
 
\t </td> 
 
\t <td width="25" style="border: 1px solid black;">18 
 
\t </td> 
 
\t <td>19 
 
\t </td> 
 
</tr> 
 
</table>

这确实解决了大小调整问题,但现在对于盒14所需的宽度 - 19被忽略!这非常令人沮丧,我尝试了很多来自在线的建议。

一对夫妇的我的约束:

  • 试图避免的div,因为这是一个电子邮件签名和 邮件客户端,我想留在手柄的div相当 不佳
  • 我宁愿不兼容使用嵌套表,因为再次,不同的邮件客户 似乎处理内嵌块/浮动元素在相当 不同的方式

回答

1

<table style="border: 1px solid black; border-collapse:collapse;" width="460px"> 
 
<tr> 
 
\t <th width="230px" rowspan="3" colspan="1" style="border: 1px solid black;">0 
 
    </th> 
 
    <td width="230px" colspan="6" style="border: 1px solid black;">1 
 
    </td> 
 
</tr> 
 
<tr> 
 
\t <td colspan="3" style="border: 1px solid black;">8 
 
\t </td> 
 
\t <td colspan="3" style="border: 1px solid black;">9 
 
\t </td> 
 
</tr> 
 
<tr> 
 
\t <td width="41px" style="border: 1px solid black;">14 
 
\t </td> 
 
\t <td width="25px" style="border: 1px solid black;">15 
 
\t </td> 
 
\t <td width="25px" style="border: 1px solid black;">16 
 
\t </td> 
 
\t <td width="25px" style="border: 1px solid black;">17 
 
\t </td> 
 
\t <td width="25px" style="border: 1px solid black;">18 
 
\t </td> 
 
\t <td width="auto">19 
 
\t </td> 
 
</tr> 
 
</table>

+0

谢谢,这正是我正在寻找的。然而,你能解释为什么这个工作和我做错了什么?即为什么不需要'table-layout:fixed'? –

0

尝试,style =“max-width:41px”也许可以。

+0

没有运气。在整个表格中添加“460px”后,将“max-width:41px”添加到方框14仍然被忽略。也尝试过“最小宽度:41px”,但没有运气。 –