Question

您好我已经创建了一个表但是当我查看它时，最后一个表列比其他列宽。有人能帮助我告诉我为什么会这样吗？

尝试缩短整个桌子的宽度但是没有帮助。一定是我想念的东西。三江源。

这是我的代码，

<table class="TFtable" style="height: 448px;" width="1007">
<tbody>
<tr>
<td style="background-color: #000000;">
<p><span style="font-size: 200%; color: #749d36;">    Pricing</span></p>
<br />
<p><span style="font-size: 200%;">     Structure</span></p>
</td>
<td style="text-align: center;">
<p><strong><span style="font-size: medium;">Professional</span></strong></p>
<p><strong><span style="font-size: medium;">Resume</span></strong></p>
<br /><br />
<p><span style="font-size: xx-large; color: #749d36;">$199</span></p>
</td>
<td class="green_background" style="text-align: center;">
<p><strong><span style="font-size: medium; color: #000000;">Managerial</span></strong></p>
<p><strong><span style="font-size: medium; color: #000000;">Resume</span></strong></p>
<br /><br />
<p><span style="font-size: xx-large;">$299</span></p>
</td>
<td style="text-align: center;">
<p><strong><span style="font-size: medium;">Executive</span></strong></p>
<p><strong><span style="font-size: medium;">Resume</span></strong></p>
<br /><br />
<p><span style="font-size: xx-large; color: #749d36;">$399</span></p>
</td>
<td class="green_background" style="text-align: center;">
<p><strong><span style="font-size: medium; color: #000000;">C-Suite</span></strong></p>
<p><strong><span style="font-size: medium; color: #000000;">Resume</span></strong></p>
<br /><br />
<p><span style="font-size: xx-large;">$499</span></p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Resume Specs</span></td>
<td style="text-align: center;"><span style="font-size: small;">2-3 pg resume</span></td>
<td style="text-align: center;">4-5 pg resume</td>
<td style="text-align: center;">
<p>+ cover sheet and</p>
<p>graphics</p>
</td>
<td style="text-align: center;">+ standalone bio pg</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Phone Interview</span></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;">
<p><img src="images/greentick.png" alt="" width="24" height="24" /></p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Draft To Approve</span></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
<td style="text-align: center;">
<p><img src="images/greentick.png" alt="" width="24" height="24" /></p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Template Options</span></td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center; vertical-align: middle;">
<p><img src="images/greentick.png" alt="" width="24" height="24" /></p>
</td>
<td style="text-align: center;"><img src="images/greentick.png" alt="" width="24" height="24" /></td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Extras</span></td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;">
<p>+ free LinkedIn</p>
<p>profile</p>
</td>
<td style="text-align: center;">
<p>+ free LinkedIn</p>
<p>profile</p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Delivery</span></td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx &amp; .pdf</p>
<p>versions</p>
</td>
</tr>
<tr>
<td style="text-align: center;"><span style="font-size: medium;">Cover Letter</span></td>
<td style="text-align: center;"><br />+ $50<br /><br /></td>
<td style="text-align: center;"><br />+ $50<br /><br /></td>
<td style="text-align: center;"><br />+ $50<br /><br /></td>
<td style="text-align: center;"><br />+ $50<br /><br /></td>
</tr>
<tr>
<td style="background-color: #000000; text-align: center;">
<p>If you're not sure where</p>
<p>your job would fit, please</p>
<p>get in touch to discuss</p>
<p>your requirements.</p>
</td>
<td style="text-align: center;">
<p>Vocations (such as</p>
<p>Teaching &amp; Nursing)</p>
<p>Early Career Professionals</p>
</td>
<td style="text-align: center;">
<p>Managers and Senior</p>
<p>Professionals (Lawyers,</p>
<p>Medical Doctors), BDMs,</p>
<p>Consultants...</p>
</td>
<td style="text-align: center;">
<p>Senior Managers and Exec</p>
<p>Directors (Operations</p>
<p>Managers, GMs, Heads of</p>
<p>Department</p>
</td>
<td style="text-align: center;">
<p>CEOs, CFOs, COOs, CIOs,</p>
<p>Managing Directors, Board</p>
<p>Members &amp; Non-Execs,</p>
<p>Practice Directors &amp; Principals</p>
</td>
</tr>
</tbody>
</table>
<p> </p>

Answer 1

您需要为所有表列设置宽度。由于您使用的是内联css，因此它们应该看起来像这样：

<td style="width:200px;">

200px，因为你有5个，你的桌子宽度大约是1000px。

全桌：http://jsfiddle.net/xsmaLab3/1/

Answer 2

只需在CSS中设置td的宽度：

td { 
    width:20%; /* because there are 5 columns 100% / 5 = 20% */
}

然后浏览器将为您工作。如果您不想，则无需将宽度设置为table，也无需进行额外的计算或其他任何操作。

看到它使用您的代码here without setting the table width或here with a table width（不推荐，因为表格元素的宽度属性在HTML5中已过时，您应该使用CSS代替）

最后一列表格更宽

2 个答案: