Участники могут занять до двух одинаковых имен. Код: <br><b>Имя на английском</b>|Имя на русском Код: <br><b>Фамилия на английском</b>|Фамилия на русском | |
HTML+ написал(а):
Код:<style type="text/css"> /****************************************************************** Cтиль:"таблица с вкладками" ******************************************************************/ /*Правки для Цвета фона и бордюров таблицы*/ .s-tabs>.stab,.s-tabs>span{ background:#8db172; border-color: #4d7436!important; } .s-tabs{ width:500px; /*ширина таблицы*/ display:block; } .s-tabs>.stab{ height:auto; /*высота вкладки*/ } /* Стиль "Ушка" вкладок */ .s-tabs>span{ position:relative; z-index:100; color:#626436; cursor:pointer; border: 1px solid; display:inline-block; padding:4px; height: 17px; margin:0; margin-right:-1px; text-align:left; padding-right:6px; text-shadow: 1px 1px 2px rgba(0,0,0,.4); font: italic normal 400 13px/16.5px "Comic Sans Ms"; } /* Активное "Ушко" */ .s-tabs>span.selected{ color:#fff; background:#42642f; border-bottom-color:transparent!important; } /* Стиль вкладки(LI)*/ .s-tabs>.stab{ width:100%; margin:0; display:none; overflow-y:auto; overflow-x:hidden; text-align:center; vertical-align:middle; border: 4px solid; padding:4px 12px!important; } </style> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Полосы прокрутки</title> <style> html { overflow: hidden; } div { height: auto; } </style> </head> <body> <div> <ul class="s-tabs"style="width:500px;"> <span>1 стр</span><span>2 стр</span><span>3 стр</span><span>4 стр</span> <!-- Имена занятые за участниками--> <li class="stab"> <table style="margin: auto;"> <tr> <td bgcolor=#4d7436 colspan=2></td> </tr> <tr> <td bgcolor=#9cc47e colspan=2><align=center><b>Имена занятые за участниками</b></align></td> </tr> <tr> <td bgcolor=#4d7436 colspan=2></td> </tr><tr><td bgcolor=#9cc47e style="width:400px;"><b>Men</b></align></td> <td bgcolor=#9cc47e style="width:400px;"><b>Women</b></align></td> </tr> <tr> </tr> <tr> <td bgcolor=#9cc47e> <u><b>A </b></u><br> <u><b>B</b></u><br> <u><b>C</b></u><br> <u><b>D</b></u><br> <u><b>F</b></u><br> <u><b>G</b></u><br> <u><b>H</b></u><br> <u><b>J</b></u><br> <u><b>K</b></u><br> <u><b>L</b></u><br> <u><b>M</b></u><br> <u><b>N</b></u><br> <u><b>P</b></u><br> <u><b>Q</b></u><br> <u><b>R</b></u><br> <u><b>S</b></u><br> <u><b>T</b></u><br> <u><b>V</b></u><br> <u><b>W</b></u><br> <u><b>X</b></u><br> <u><b>Y</b></u><br> <u><b>Z</b></u><br> </td> <td bgcolor=#9cc47e> <u><b>A </b></u><br> <u><b>B</b></u><br> <u><b>C</b></u><br> <u><b>D</b></u><br> <u><b>F</b></u><br> <u><b>G</b></u><br> <u><b>H</b></u><br> <u><b>J</b></u><br> <u><b>K</b></u><br> <u><b>L</b></u><br> <u><b>M</b></u><br> <u><b>N</b></u><br> <u><b>P</b></u><br> <u><b>Q</b></u><br> <u><b>R</b></u><br> <u><b>S</b></u><br> <u><b>T</b></u><br> <u><b>V</b></u><br> <u><b>W</b></u><br> <u><b>X</b></u><br> <u><b>Y</b></u><br> <u><b>Z</b></u><br> </td> </tr> </table> </li> <li class="stab"> <table style="margin: auto;"> <tr> <td bgcolor=#4d7436 colspan=2></td> </tr> <tr> <td bgcolor=#9cc47e colspan=2><align=center><b>Имена занятые по акции </b></align></td> </tr> <tr> <td bgcolor=#4d7436 colspan=2></td> </tr><tr><td bgcolor=#9cc47e style="width:400px;"><b>Men</b></align></td> <td bgcolor=#9cc47e style="width:400px;"><b>Women</b></align></td> </tr> <tr> </tr> <tr> <td bgcolor=#9cc47e> <u><b>A </b></u><br> <u><b>B</b></u><br> <u><b>C</b></u><br> <u><b>D</b></u><br> <u><b>F</b></u><br> <u><b>G</b></u><br> <u><b>H</b></u><br> <u><b>J</b></u><br> <u><b>K</b></u><br> <u><b>L</b></u><br> <u><b>M</b></u><br> <u><b>N</b></u><br> <u><b>P</b></u><br> <u><b>Q</b></u><br> <u><b>R</b></u><br> <u><b>S</b></u><br> <u><b>T</b></u><br> <u><b>V</b></u><br> <u><b>W</b></u><br> <u><b>X</b></u><br> <u><b>Y</b></u><br> <u><b>Z</b></u><br> </td> <td bgcolor=#9cc47e> <u><b>A </b></u><br> <u><b>B</b></u><br> <u><b>C</b></u><br> <u><b>D</b></u><br> <u><b>F</b></u><br> <u><b>G</b></u><br> <u><b>H</b></u><br> <u><b>J</b></u><br> <u><b>K</b></u><br> <u><b>L</b></u><br> <u><b>M</b></u><br> <u><b>N</b></u><br> <u><b>P</b></u><br> <u><b>Q</b></u><br> <u><b>R</b></u><br> <u><b>S</b></u><br> <u><b>T</b></u><br> <u><b>V</b></u><br> <u><b>W</b></u><br> <u><b>X</b></u><br> <u><b>Y</b></u><br> <u><b>Z</b></u><br> </td> </tr> </table> </li> <li class="stab"> <table style="margin: auto;"> <tr> <td bgcolor=#4d7436 colspan=2></td> </tr> <tr> <td bgcolor=#9cc47e colspan=2><align=center><b>Фамилии занятые за участниками и по акции </b></align></td> </tr> <tr> <td bgcolor=#4d7436 colspan=2></td> </tr><tr><td bgcolor=#9cc47e style="width:400px;"><b>User</b></align></td> <td bgcolor=#9cc47e style="width:400px;"><b>Action</b></align></td> </tr> <tr> </tr> <tr> <td bgcolor=#9cc47e> <u><b>A </b></u><br> <u><b>B</b></u><br> <u><b>C</b></u><br> <u><b>D</b></u><br> <u><b>F</b></u><br> <u><b>G</b></u><br> <u><b>H</b></u><br> <u><b>J</b></u><br> <u><b>K</b></u><br> <u><b>L</b></u><br> <u><b>M</b></u><br> <u><b>N</b></u><br> <u><b>P</b></u><br> <u><b>Q</b></u><br> <u><b>R</b></u><br> <u><b>S</b></u><br> <u><b>T</b></u><br> <u><b>V</b></u><br> <u><b>W</b></u><br> <u><b>X</b></u><br> <u><b>Y</b></u><br> <u><b>Z</b></u><br> </td> <td bgcolor=#9cc47e> <u><b>A </b></u><br> <u><b>B</b></u><br> <u><b>C</b></u><br> <u><b>D</b></u><br> <u><b>F</b></u><br> <u><b>G</b></u><br> <u><b>H</b></u><br> <u><b>J</b></u><br> <u><b>K</b></u><br> <u><b>L</b></u><br> <u><b>M</b></u><br> <u><b>N</b></u><br> <u><b>P</b></u><br> <u><b>Q</b></u><br> <u><b>R</b></u><br> <u><b>S</b></u><br> <u><b>T</b></u><br> <u><b>V</b></u><br> <u><b>W</b></u><br> <u><b>X</b></u><br> <u><b>Y</b></u><br> <u><b>Z</b></u><br> </td> </tr> </table> </li> </li> <li class="stab"> <table style="margin: auto;"> <tr> <td bgcolor=#4d7436 colspan=2></td> </tr> <tr> <td bgcolor=#9cc47e colspan=2><align=center><b>Придержанные имена и фамилии </b></align></td> </tr> <tr> <td bgcolor=#4d7436 colspan=2></td> </tr><tr><td bgcolor=#9cc47e style="width:400px;"><b>Names</b></align></td> <td bgcolor=#9cc47e style="width:400px;"><b>Surnames</b></align></td> </tr> <tr> </tr> <tr> <td bgcolor=#9cc47e> Пусто </td> <td bgcolor=#9cc47e> Пусто </td> </tr> </table> </li> </ul> </div> </body> </html> <script type="text/javascript"> $('.s-tabs').each(function(){ $(this).children('span:first').addClass('selected'); $(this).children('.stab').eq(0).show(); }); $('.s-tabs>span').live('click', function(){ var a = $(this).parent('.s-tabs'); var arr = a.children('span'); var index = arr.index(this); arr.removeClass('selected'); $(this).addClass('selected'); a.children('.stab').hide(); a.children('.stab').eq(index).show(); }); </script>