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

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显示了一个更复杂的布局示例。