Question

我的HTML电子邮件布局左下角有两个TD，但是第一个没有生效我设置的140px宽度，这有什么明显的原因？

enter image description here

<td class="blue-table" width="375px" valign="top">
    <table class="blue-table" cellspacing="0" cellpadding="0">
        <tr>
            <td>
            <a href="#"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_03.jpg" /></a>
            </td>
        </tr>
        <tr>
            <td class="blue-table" width="20px"></td>
        </tr>
        <tr>                            
            <td>
            <a href="#"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_11.jpg" /></a>
            </td>
        </tr>

        <tr>
            <td>
                <p><strong>8X4 Concrete Mixers</strong><br />
                <p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
                2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
                </p>
                </p>
            </td>
        </tr>

        <tr>
            <td width="140px">
                <p><strong>Cars</strong><br />
                2011 (61) TOYOTA Verso 2.0 D4-D TR Panoramic Roof 7-Seat 5dr Manual – c.39K miles.
                </p>

            </td>
            <td width="186px"><img src="http://www.mangemails.co.uk/wyleshardy/3rd-June-2014/slice_30.jpg" /></td>
        </tr>

    </table>
</td>

Answer 1

看起来你的最后一行有两个单元格 - 而且每行上面只有一个单元格。这意味着您的桌子实际上是两列宽，车辆的图片本身就是一个固定的列。这将搞乱宽度计算。

处理此问题的一种方法是使单细胞行分别跨越两列，并保持两细胞行不变。 colspan会执行此操作，并应用以下内容：

    <tr>
        <td colspan="2">
            <p><strong>8X4 Concrete Mixers</strong><br />
            <p>2006 (56) DAF FAD CF75.360 (Euro 4) 8x4 fitted with McPhee 8m3 Rapid Discharge Concrete Mixer, Serial No: 000962H, Build Date: 08/2006, Eaton 5433-080 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Controls, Rear Camera (not in use), 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat. etc. Odometer: c.180K Kms. Tested til: End of September 2014.</p><p>
            2004 (04) SCANIA 4 SERIES P114CB-380 8x4 fitted with Hymix 8m3 Rapid Discharge Concrete Mixer, Serial No: H90067, Build Date: 09/12/2003, Sauer HPM51-2 PTO, Chutes, Flo Meter, Water Tank and Wash Down Hose, Cab and Rear Electronic Controls, Brigade BE-255 Backeye Rear Camera and in Cab Monitor, 8 Speed Manual Transmission, Cruise Control, Single Passenger Seat, etc. Odometer: c.266K Kms. Test Expired: End of March 2014.
            </p>
            </p>
        </td>
    </tr>

您需要对每个行执行此操作。

这应该可以为您的宽度设置提供更可预测的结果。

您可以通过为表格单元格提供CSS的临时边框来仔细检查表格布局，如下所示：

td {
  border: 1px solid red;
}

修改

可能更好的解决方案是使用CSS和float: right汽车的图片（添加边距或填充以在其周围放置一些空间）。然后，您可以将<td class="blue-table" width="375px" valign="top">内的所有内容视为一组正常的段落和图片，并完全避免使用colspan。如果你有兴趣，有一篇关于使用表格进行布局的优点或其他内容的长篇文章：Why not use tables for layout in HTML?

Answer 2

试试这个：

<td width="140">

或

<td style="width: 140px">

HTML TD宽度未生效

2 个答案: