Question

我有表，我必须使用css规则来分隔表格单元格（border-spacing: 10px;border-collapse: separate;），但是当我将背景颜色放在表格行中时，它会在每个表格单元格中显示10px的这种颜色空间。有没有办法解决它。我必须把这个背景颜色放在没有空格的行中吗？非常感谢你。

HTML：

<table style="border-spacing: 10px;border-collapse: separate;">
                <tr><td style="text-align:left;"><b style="color: #32598A;">Course Name</b></td><td style="text-align:left;"><b style="color: #32598A;">Days</b></td><td style="text-align:left;"><b style="color: #32598A;">Start</b></td><td style="text-align:left;"><b style="color: #32598A;">End</b></td><td style="text-align:left;"><b style="color: #32598A;">Location</b></td><td style="text-align:left;"><b style="color: #32598A;">Price</b></td></tr>
                {section name=open_trainings loop=$open_trainings_all}
                            <tr><td style="text-align:left;"><a style="color: #5DA9DD;" href="/{$country}/{$lang}/{$open_trainings_all[open_trainings].CategoryID}_{if $open_trainings_all[open_trainings].CategoryID == "15"}{foreach from=$category_15 item=CAT}{$CAT.friendlyTitle}{/foreach}{/if}{if $open_trainings_all[open_trainings].CategoryID == "16"}{foreach from=$category_16 item=CAT}{$CAT.friendlyTitle}{/foreach}{/if}/{$open_trainings_all[open_trainings].Code}_{$open_trainings_all[open_trainings].friendlyTitle}.html?do=course"><b>{$open_trainings_all[open_trainings].Title}</b></a></td>
                            <td style="text-align:left;">{$open_trainings_all[open_trainings].Days}</td>
                            <td style="text-align:left;">{$open_trainings_all[open_trainings].LocalDateStart}</td>
                            <td style="text-align:left;">{$open_trainings_all[open_trainings].LocalDateEnd}</td>
                            <td style="text-align:left;"><img src="/storage/images/flags/flags2/{$open_trainings_all[open_trainings].Flag}" alt="flag" /><br />({$open_trainings_all[open_trainings].Country})<br />{$open_trainings_all[open_trainings].Location}</td>
                       {if strpos($smarty.server.REQUEST_URI,'/us/')}
                            <td style="text-align:left;">{$open_trainings_all[open_trainings].Priceus} USD</td>
                       {else}
                            <td style="text-align:left;">{$open_trainings_all[open_trainings].Priceau} AUD</td>
                       {/if}
                            <td style="text-align:left;"><a style="color: #5DA9DD;" href="/{$country}/{$lang}/7_contacts.html?form=3&acode={$open_trainings_all[open_trainings].Code}&l={$open_trainings_all[open_trainings].Location}&d={$open_trainings_all[open_trainings].StartDate}">Registration</a></td></tr>
                {/section}
</table>

Answer 1

你不能。

表格在演示时有很多注意事项。你遇到过其中一个。

其中一个解决方法是折叠单元格，并使用其他空行来分隔连续的行。

<table style="border-collapse:collapse;"> <!-- No spaces any longer -->
    <tr>
        <td>Cell A1</td>
        <td>Cell A2</td>
        <td>Cell A3</td>
    </tr>
    <tr class="separator"> <!-- Those are the new horizontal spaces -->
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>Cell B1</td>
        <td>Cell B2</td>
        <td>Cell B3</td>
    </tr>
</table>

This page显示了更复杂布局的示例。

Answer 2

你需要把这个<table cellspacing="0" cellpadding="0" style="border-spacing: 10px;border-collapse: separate;">

参考链接[http://www.w3schools.com/tags/att_table_cellpadding.asp]

CSS / CSS3 - 如何在表格单元格之间没有空格的表格行中制作背景颜色？

2 个答案: