td高度和宽度未被拾取

时间:2017-09-27 15:33:18

标签: html

我正在制作一个html电子邮件签名,但我想更改一个td,它的高度和宽度在这里是代码:

<tr bgcolor="#ffd668" style="height: 50px;">
    <td colspan="10" style="border-radius: 5px;">
        <table>
            <tbody><tr>
                <td width="5"></td>
                <td width="200" height="30" align="left" style="line-height: 0" colspan="2">
                    <a style="border: 0;" href="https://www.fingerspitz.nl" target="_blank">
                        <img width="128" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Fingerspitz_logo.png">
                    </a>
                </td>

                <td width="190" align="right">
                    <table style="width:100%;">
                        <tbody><tr>
                            <td width="30" height="30">
                                <a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.facebook.com/Fingerspitz" target="_blank">
                                    <img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/LinkedIn.png\">
                                </a>
                            </td>
                            <td width="30" height="30">
                                <a style="border: none; display: block; width: 30px; height: 30px;" href="https://twitter.com/fingerspitzNL/" target="_blank">
                                    <img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/Twitter.png">
                                </a>
                            </td>
                            <td width="30" height="30">
                                <a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.linkedin.com/company/fingerspitz" target="_blank">
                                    <img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/LinkedIn.png">
                                </a>
                            </td>
                            <td width="40" height="30">
                                <a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.youtube.com/channel/UCpovXRL4rEF8skjhle2z25Q" target="_blank">
                                    <img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/YouTube.png">
                                </a>
                            </td>
                            <td width="0.2" height="20" bgcolor="#00000"></td>
                            <td width="40" height="30" align="right">
                                <a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.google.nl/maps/place/Fingerspitz+Online+Marketing/@51.5904415,4.7595442,17z/data=!4m5!3m4!1s0x47c69f8ba6d2e709:0xbbf458d8e81294cb!8m2!3d51.5904382!4d4.7617329" target="_blank">
                                    <img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/Maps.png">
                                </a>
                            </td>
                            <td width="15" height="30"></td>
                        </tr>
                    </tbody></table>

                </td>
            </tr>
        </tbody></table>
    </td>
</tr>

以下是fiddle

中的html代码

所以基本上我想要实现的是youtube和googlemaps图标之间的垂直黑色条纹稍微薄一点,高度与图标图像一样均匀。

有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

请立即查看

&#13;
&#13;
<tr bgcolor="#ffd668" style="height: 50px;">
		<td colspan="10" style="border-radius: 5px;">
			<table>
				<tbody><tr>
					<td width="5"></td>
					<td width="200" height="30" align="left" style="line-height: 0" colspan="2">
						<a style="border: 0;" href="https://www.fingerspitz.nl" target="_blank">
							<img width="128" height="22" alt="Fingerspitz" src="https://www.fingerspitz.nl/files/Social_iconen/Fingerspitz_logo.png">
						</a>
					</td>

					<td width="190" align="right">
						<table style="width:100%;">
							<tbody><tr>
								<td width="30" height="30">
									<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.facebook.com/Fingerspitz" target="_blank">
										<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/LinkedIn.png">
									</a>
								</td>
								<td width="30" height="30">
									<a style="border: none; display: block; width: 30px; height: 30px;" href="https://twitter.com/fingerspitzNL/" target="_blank">
										<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/Twitter.png">
									</a>
								</td>
								<td width="30" height="30">
									<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.linkedin.com/company/fingerspitz" target="_blank">
										<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/LinkedIn.png">
									</a>
								</td>
								<td width="40" height="30">
									<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.youtube.com/channel/UCpovXRL4rEF8skjhle2z25Q" target="_blank">
										<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/YouTube.png">
									</a>
								</td>
								<td width="0.2" height="30"  ><span style="background-color:#000;height:28px;display:table;width:2px;"></span></td>
								<td width="40" height="30" align="right">
									<a style="border: none; display: block; width: 30px; height: 30px;" href="https://www.google.nl/maps/place/Fingerspitz+Online+Marketing/@51.5904415,4.7595442,17z/data=!4m5!3m4!1s0x47c69f8ba6d2e709:0xbbf458d8e81294cb!8m2!3d51.5904382!4d4.7617329" target="_blank">
										<img width="30" height="30" src="https://www.fingerspitz.nl/files/Social_iconen/80_x_80/Maps.png">
									</a>
								</td>
								<td width="15" height="30"></td>
							</tr>
						</tbody></table>

					</td>
				</tr>
			</tbody></table>
		</td>
	</tr>
&#13;
&#13;
&#13;