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

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

0 голосов
/ 31 мая 2011

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

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

<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;"> к телу таблицы, но это не работает.

Ответы [ 2 ]

0 голосов
/ 31 мая 2011

Самый простой способ - добавить отступы к нижней части <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;
}
0 голосов
/ 31 мая 2011

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

thead{padding-bottom:2em;}

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

...