Выравнивание таблицы
Вот понравилась мне такблица hltm css
.simple-little-table { font-family:Arial, Helvetica, sans-serif; color:#666; font-size:12px; text-shadow: 1px 1px 0px #fff; background:#eaebec; margin:20px; border:#ccc 1px solid; border-collapse:separate; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-box-shadow: 0 1px 2px #d1d1d1; -webkit-box-shadow: 0 1px 2px #d1d1d1; box-shadow: 0 1px 2px #d1d1d1; } .simple-little-table th { font-weight:bold; padding:21px 25px 22px 25px; border-top:1px solid #fafafa; border-bottom:1px solid #e0e0e0; background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); background: -moz-linear-gradient(top, #ededed, #ebebeb); } .simple-little-table th:first-child{ text-align: left; padding-left:20px; } .simple-little-table tr:first-child th:first-child{ -moz-border-radius-topleft:3px; -webkit-border-top-left-radius:3px; border-top-left-radius:3px; } .simple-little-table tr:first-child th:last-child{ -moz-border-radius-topright:3px; -webkit-border-top-right-radius:3px; border-top-right-radius:3px; } .simple-little-table tr{ text-align: center; padding-left:20px; } .simple-little-table tr td:first-child{ text-align: left; padding-left:20px; border-left: 0; } .simple-little-table tr td { padding:18px; border-top: 1px solid #ffffff; border-bottom:1px solid #e0e0e0; border-left: 1px solid #e0e0e0; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); background: -moz-linear-gradient(top, #fbfbfb, #fafafa); } .simple-little-table tr:nth-child(even) td{ background: #f6f6f6; background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)); background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); } .simple-little-table tr:last-child td{ border-bottom:0; } .simple-little-table tr:last-child td:first-child{ -moz-border-radius-bottomleft:3px; -webkit-border-bottom-left-radius:3px; border-bottom-left-radius:3px; } .simple-little-table tr:last-child td:last-child{ -moz-border-radius-bottomright:3px; -webkit-border-bottom-right-radius:3px; border-bottom-right-radius:3px; } .simple-little-table tr:hover td{ background: #f2f2f2; background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0)); background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0); } .simple-little-table a:link { color: #666; font-weight: bold; text-decoration:none; } .simple-little-table a:visited { color: #999999; font-weight:bold; text-decoration:none; } .simple-little-table a:active, .simple-little-table a:hover { color: #bd5a35; text-decoration:underline; }
Постоянно по левому нижнему краю выравнивается. Помогите решить проблему. Нужно чтобы по верхнему выравнивалась.
oRIGINAL , а скрины где? Это мне надо ставить ее у себя, смотреть, въехать, что ты хочешь, а уже потом говорить, а так бы глянул скрин, в коде посмотрел, что, да как. Если я правильно понял, то тебе нужно чтобы она выравнивалась по центру, если да, то вот код.
Код
.simple-little-table { font-family:Arial, Helvetica, sans-serif; color:#666; font-size:12px; text-shadow: 1px 1px 0px #fff; background:#eaebec; margin: 0 auto; border:#ccc 1px solid; border-collapse:separate; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-box-shadow: 0 1px 2px #d1d1d1; -webkit-box-shadow: 0 1px 2px #d1d1d1; box-shadow: 0 1px 2px #d1d1d1; } .simple-little-table th { font-weight:bold; padding:21px 25px 22px 25px; border-top:1px solid #fafafa; border-bottom:1px solid #e0e0e0; background: #ededed; background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); background: -moz-linear-gradient(top, #ededed, #ebebeb); } .simple-little-table th:first-child{ text-align: left; padding-left:20px; } .simple-little-table tr:first-child th:first-child{ -moz-border-radius-topleft:3px; -webkit-border-top-left-radius:3px; border-top-left-radius:3px; } .simple-little-table tr:first-child th:last-child{ -moz-border-radius-topright:3px; -webkit-border-top-right-radius:3px; border-top-right-radius:3px; } .simple-little-table tr{ text-align: center; padding-left:20px; } .simple-little-table tr td:first-child{ text-align: left; padding-left:20px; border-left: 0; } .simple-little-table tr td { padding:18px; border-top: 1px solid #ffffff; border-bottom:1px solid #e0e0e0; border-left: 1px solid #e0e0e0; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); background: -moz-linear-gradient(top, #fbfbfb, #fafafa); } .simple-little-table tr:nth-child(even) td{ background: #f6f6f6; background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)); background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); } .simple-little-table tr:last-child td{ border-bottom:0; } .simple-little-table tr:last-child td:first-child{ -moz-border-radius-bottomleft:3px; -webkit-border-bottom-left-radius:3px; border-bottom-left-radius:3px; } .simple-little-table tr:last-child td:last-child{ -moz-border-radius-bottomright:3px; -webkit-border-bottom-right-radius:3px; border-bottom-right-radius:3px; } .simple-little-table tr:hover td{ background: #f2f2f2; background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0)); background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0); } .simple-little-table a:link { color: #666; font-weight: bold; text-decoration:none; } .simple-little-table a:visited { color: #999999; font-weight:bold; text-decoration:none; } .simple-little-table a:active, .simple-little-table a:hover { color: #bd5a35; text-decoration:underline; }
Заменять только CSS.
Reactor , спасибо что уделил время. То, что ты скинул я уже пробовал. не решает проблему.А скрин... Не думал что он вообще чем то модет помочь, ну ладно вот, это в теме на форуме в ннизу она постоянно прилипает
Цитата oRIGINAL (
)
Постоянно по левому нижнему краю выравнивается
А что выравнивается то не так? Судя по скрину все окей.
Prosvetekvator , да щас по середине, но по внизу прилипает, я ж писал. А мне бы чтоб к верхнему краю...
oRIGINAL , у меня все по центру и нет отступов вниз и в коде нету. Скинь ссылку на страницу, возможно в дизайне или на странице что-то делает отступ.
Reactor , оно у меня в теме на форуме прилипает к низу.
oRIGINAL , держи, сделал. И вправду, так нормально, а как на форум вставляешь делает ачешуительный отступ сверху. Это по месту, где хочешь таблицу.
Код
<link type="text/css" rel="stylesheet" href="/tablica.css"> <table class="simple-little-table"> <tr> <th>Алгоритмы </th> <th>Выполненность</th> <th>Наличие прогонов</th> </tr><!-- Table Header --> <tr> <td>Генетический алгоритм</td> <td>100%</td> <td>Да</td> </tr><!-- Table Row --> <tr> <td>Муравьиный алгоритм</td> <td>100%</td> <td>Да</td> </tr><!-- Darker Table Row --> <tr> <td>Метод Ньютона</td> <td>20%</td><td>Нет</td> </tr> <tr> <td>Дифференциальный алгоритм</td> <td>80%</td> <td>Нет</td> </tr> <tr> <td>Метод наискорейшего пуска</td> <td>100%</td> <td>Да</td> </tr> <tr> <td>Случайный поиск</td> <td>23%</td> <td>Да</td> </tr> <tr> <td><a href="blog.harrix.org">Гиперссылка</a></td> <td>80%</td> <td><a href="blog.harrix.org">Да</a></td> </tr> </table>
Это в ФМ (Файловый менеджер) http://reactorcity.ru/tablica.css Создай свой файл tablica.css и залей его в ФМ Вот доказательство что работает, вставлял даже в набитом битком текстом форум, все нормально отображает.