Таблица - Увеличение пробела между заголовком и первой строкой

#html #asp.net #html-table #repeater

#HTML #asp.net #html-таблица #повторитель

Вопрос:

Я хочу увеличить пространство между строкой заголовка и первой строкой в таблице. Как мне это сделать?

У меня есть следующее:

 <asp:Repeater ID="myRepeater" runat="server" >
   <HeaderTemplate>
        <table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
            <thead>
                <tr align="left">
                        <th style="width:15%">
                            Column 1  
                        </th>
                        <th style="width:15%">
                            Column 2
                        </th>
                        <th style="width:15%">
                            Column 3
                        </th>                            
                     </tr>
                </thead>
        </HeaderTemplate>
        <ItemTemplate>
                <tbody style="padding-top: 50px;">
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                   </tr>                        
                </tbody>
        </ItemTemplate>
        <SeparatorTemplate>
            <tr style="padding-bottom: 30px;">
                <td colspan="7" style="padding-bottom: 20px; padding-top: 20px;">
                    <hr style="width:100%" /></td>
            </tr>
        </SeparatorTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>

Как вы можете видеть, я добавил <style="padding-top: 50px;">
в тело таблицы, но это не работает.

Ответ №1:

Не уверен, но, возможно:

 thead{padding-bottom:2em;}

Даст вам желаемый результат.

Ответ №2:

Самым простым способом было бы добавить отступы в нижней части <th> элементов

 <th style="width:15% padding-bottom: 50px">
     Column 1  
</th>
<th style="width:15% padding-bottom: 50px">
     Column 2
</th>
<th style="width:15%; padding-bottom: 50px">
     Column 3
</th>

Примечание: это хорошо для целей тестирования, но это действительно должно быть сделано в таблице стилей, а не непосредственно в html.

 th {
    padding-bottom: 50px;
}