JScript

Programação & Desenvolvimento


tabela com várias abas

avatar
Convidado
Convidado

tabela com várias abas Empty tabela com várias abas

Mensagem por Convidado em Seg 27 Jan 2014, 10:29 am

Vejam a imagem abaixo:

tabela com várias abas LVAFBw3

Link do efeito abaixo para entenderem o sistema, gostaria de algo assim, com uma lista de A a Z, onde cada letra abrisse uma área onde estariam os links referentes.

Queria saber se e possível fazer.

Link do efeito:

http://www.pieceproject.net/biografias/

Meu fórum:

http://somosmugiwara.forumeiros.com/forum
JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por JScript em Seg 27 Jan 2014, 5:13 pm

Olá!

Sim é possível, vou verificar o código utilizado lá pra adaptar em seu fórum ok?

JS



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Seg 27 Jan 2014, 10:41 pm

Humrum, ta blz JS.

Ficarei no aguardo...
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Seg 27 Jan 2014, 10:43 pm

Humrum, ta blz JS.

Ficarei no aguardo...
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Ter 28 Jan 2014, 8:47 am




The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Ter 28 Jan 2014, 10:21 am

Não funcionou direito, como pode ver...

http://somosmugiwara.forumeiros.com/h39
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Ter 28 Jan 2014, 10:38 am

Que estranho, tente copiar o conteúdo desta página aqui
http://jsfiddle.net/CME64/CARcQ/4/embedded/result/

Veja que funciona perfeitamente..



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Ter 28 Jan 2014, 10:55 am

Humrum, funcionou depois que ajustei os links, mais ficará ruim para editar, já que dependerei de links externos, tanto JS quanto CSS...
vou tentar dar um jeito aqui, depois volto com repostas.
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Ter 28 Jan 2014, 11:14 am

Se você não obter resultados satisfatórios posso tentar editar para você



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Qua 29 Jan 2014, 5:28 pm

Testei novamente mais não obtive sucesso, veja abaixo:

http://somosmugiwara.forumeiros.com/h39-

Quando clica em alguma letra, o efeito não funciona....
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Qua 29 Jan 2014, 5:44 pm

Olá amigos, muito estranho mesmo. Bom de qualquer forma, tente a versão jQuery UI

http://jqueryui.com/tabs

Poderia pegar o código do fórum la, mas sei la não acho muito certo isso.



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Qui 30 Jan 2014, 9:02 am

Este seria um pouco parecido, mais ainda não teria a função de quando se clicar nas letras apareça somente os links iniciados com tal letra......

queria algo mais parecido com o que mostrei...
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Qui 30 Jan 2014, 11:31 am

Olá meu amigo, você tem certeza que está fazendo os processos de maneira correta? Porque eu realizei o teste e o efeito funcionou perfeitamente, veja:
http://punbbteste.forumeiros.com/h3-navegacao-por-abas

Inclusive fiz de duas maneiras, com e sem o corpo do fórum
http://punbbteste.forumeiros.com/h4-navegacao-por-abas-2

Veja como fiz
A navegação por abas sem o corpo do fórum
Código:
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () {     
        var _letter = $(this), _text = $(this).text(), _count = 0;
        if(_text == 'All') _text = '.';
        _alphabets.removeClass("active");
        _letter.addClass("active");

        _contentRows.hide();
        _contentRows.each(function (i) {
            var _cellText = $(this).children('td').eq(0).text();
            if (RegExp('^' + _text).test(_cellText)) {
                _count += 1;
                $(this).fadeIn(400);
            }
        });                 
    });
});


</script>
<style type="text/css">
  -/* stylesheet contains style for filtering alphabetical lists and tables
    http://www.faridesign.net
*/

.wrapper
{
    width: 680px;
    margin: 0 auto;
}

    .wrapper h1
    {
        color: #555;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.15) 0px 0px 1px;
        letter-spacing: 2px;
    }

#conutries
{
    width: 650px;
    background: white;
}

.alphabet
{
    margin: 0 0 10px;
    overflow: hidden;
}

    .alphabet a, #countries-table tr
    {
        transition: background-color 0.3s ease-in-out;
        -moz-transition: background-color 0.3s ease-in-out;
        -webkit-transition: background-color 0.3s ease-in-out;
    }

    .alphabet a
    {
        width: 20px;
        float: left;
        color: #333;
        cursor: pointer;
        height: 20px;
        border: 1px solid #CCC;
        display: block;
        padding: 2px 2px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
        border-right: none;
        text-decoration: none;
        background-color: #F1F1F1;
    }

        .alphabet a.first
        {
            border-radius: 3px 0 0 3px;
        }

        .alphabet a.last
        {
            border-right: 1px solid silver;
            border-radius: 0 3px 3px 0;
        }

        .alphabet a:hover,
        .alphabet a.active
        {
            background: #FBF8E9;
            font-weight: bold;
        }
      @charset "utf-8";
/* CSS Document */


.wrapper { width: 960px; margin: 0px auto; padding-top: 20px; min-height: 600px; }

.table-grid h1 { padding-top: 35px; font-size: 20px; }
.table-grid table { *border-collapse: collapse; /* IE7 and lower */    border-spacing: 0; width: 100%; font-family: 'trebuchet MS', 'Lucida sans', Arial; font-size: 12px; color:Black; }
.table-grid body td { padding: 5px 5px 5px 5px; min-width: 50px; height: 26px; }
.table-grid thead th
{
   

}

.table-grid tbody td label { display: block; text-transform: uppercase !important; font-size: 110%; }
.table-grid tbody td label { display: block; text-transform: uppercase; font-size: 105%; font-weight: bold; }
.table-grid tbody td span { display: block; opacity: .7; }

.table-grid thead th label { display: block; font-weight: 500; text-transform: uppercase; }
.table-grid thead th span { opacity: .7; }
.table-grid thead th.null { background: #fff; }

/* column rounded */

.table-grid table.bordered
{
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
}

.bordered tr:hover
{
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}   
   
.bordered td, .bordered th
{
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.table-grid table.gray thead th
{
    background-color: #F1F1F1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#EEE));
    background-image: -webkit-linear-gradient(top, whiteSmoke, #EEE);
    background-image: -moz-linear-gradient(top, whiteSmoke, #EEE);
    background-image: -ms-linear-gradient(top, whiteSmoke, #EEE);
    background-image: -o-linear-gradient(top, whiteSmoke, #EEE);
    background-image: linear-gradient(top, whiteSmoke, #EEE);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.table-grid table.blue thead th
{
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.table-grid table.bordered td:first-child, .bordered th:first-child { border-left: none; }
.table-grid table.bordered th { border-top: none; }
.table-grid table.bordered th:first-child { -moz-border-radius: 6px 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; }
.table-grid table.bordered th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; }
.table-grid table.bordered th:only-child { -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; }
.table-grid table.bordered tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; }
.table-grid table.bordered tr:last-child td:last-child { -moz-border-radius: 0 0 6px; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; }

.zebra td, .zebra th { padding: 10px; border-bottom: 1px solid #F2F2F2; }
.zebra tbody tr:nth-child(even) { background: #F5F5F5; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; }

/* column colors */
.table-grid thead    th.blue { border-bottom: 2px solid #1FA2E1; }
.table-grid thead    th.black { border-bottom: 2px solid black; }
.table-grid thead    th.red { border-bottom: 2px solid red; }
.table-grid thead    th.green { border-bottom: 2px solid green; }
.table-grid thead    th.gray { border-bottom: 2px solid #ccc; }

/* column size */
.table-grid thead    th.col1 { width: 1%; }
.table-grid thead    th.col2 { width: 2%; }
.table-grid thead    th.col3 { width: 3%; }
.table-grid thead    th.col4 { width: 4%; }
.table-grid thead    th.col5 { width: 5%; }
.table-grid thead    th.col6 { width: 6%; }
.table-grid thead    th.col7 { width: 7%; }
.table-grid thead    th.col8 { width: 8%; }
.table-grid thead    th.col9 { width: 9%; }
.table-grid thead    th.col10 { width: 10%; }
.table-grid thead    th.col11 { width: 11%; }
.table-grid thead    th.col12 { width: 12%; }
.table-grid thead    th.col13 { width: 13%; }
.table-grid thead    th.col14 { width: 14%; }
.table-grid thead    th.col15 { width: 15%; }
.table-grid thead    th.col16 { width: 16%; }
.table-grid thead    th.col17 { width: 17%; }
.table-grid thead    th.col18 { width: 18%; }
.table-grid thead    th.col19 { width: 19%; }
.table-grid thead    th.col20 { width: 20%; }
.table-grid thead    th.col21 { width: 21%; }
.table-grid thead    th.col22 { width: 22%; }
.table-grid thead    th.col23 { width: 23%; }
.table-grid thead    th.col24 { width: 24%; }
.table-grid thead    th.col25 { width: 25%; }
.table-grid thead    th.col26 { width: 26%; }
.table-grid thead    th.col27 { width: 27%; }
.table-grid thead    th.col28 { width: 28%; }
.table-grid thead    th.col29 { width: 29%; }
.table-grid thead    th.col30 { width: 30%; }
.table-grid thead    th.col31 { width: 31%; }
.table-grid thead    th.col32 { width: 32%; }
.table-grid thead    th.col33 { width: 33%; }
.table-grid thead    th.col34 { width: 34%; }
.table-grid thead    th.col35 { width: 35%; }
.table-grid thead    th.col36 { width: 36%; }
.table-grid thead    th.col37 { width: 37%; }
.table-grid thead    th.col38 { width: 38%; }
.table-grid thead    th.col39 { width: 39%; }
.table-grid thead    th.col40 { width: 40%; }
.table-grid thead    th.col41 { width: 41%; }
.table-grid thead    th.col42 { width: 42%; }
.table-grid thead    th.col43 { width: 43%; }
.table-grid thead    th.col44 { width: 44%; }
.table-grid thead    th.col45 { width: 45%; }
.table-grid thead    th.col46 { width: 46%; }
.table-grid thead    th.col47 { width: 47%; }
.table-grid thead    th.col48 { width: 48%; }
.table-grid thead    th.col49 { width: 49%; }
.table-grid thead    th.col50 { width: 50%; }
.table-grid thead    th.col51 { width: 51%; }
.table-grid thead    th.col52 { width: 52%; }
.table-grid thead    th.col53 { width: 53%; }
.table-grid thead    th.col54 { width: 54%; }
.table-grid thead    th.col55 { width: 55%; }
.table-grid thead    th.col56 { width: 56%; }
.table-grid thead    th.col57 { width: 57%; }
.table-grid thead    th.col58 { width: 58%; }
.table-grid thead    th.col59 { width: 59%; }
.table-grid thead    th.col60 { width: 60%; }
.table-grid thead    th.col61 { width: 61%; }
.table-grid thead    th.col62 { width: 62%; }
.table-grid thead    th.col63 { width: 63%; }
.table-grid thead    th.col64 { width: 64%; }
.table-grid thead    th.col65 { width: 65%; }
.table-grid thead    th.col66 { width: 66%; }
.table-grid thead    th.col67 { width: 67%; }
.table-grid thead    th.col68 { width: 68%; }
.table-grid thead    th.col69 { width: 69%; }
.table-grid thead    th.col70 { width: 70%; }
.table-grid thead    th.col71 { width: 71%; }
.table-grid thead    th.col72 { width: 72%; }
.table-grid thead    th.col73 { width: 73%; }
.table-grid thead    th.col74 { width: 74%; }
.table-grid thead    th.col75 { width: 75%; }
.table-grid thead    th.col76 { width: 76%; }
.table-grid thead    th.col77 { width: 77%; }
.table-grid thead    th.col78 { width: 78%; }
.table-grid thead    th.col79 { width: 79%; }
.table-grid thead    th.col80 { width: 80%; }
.table-grid thead    th.col81 { width: 81%; }
.table-grid thead    th.col82 { width: 82%; }
.table-grid thead    th.col83 { width: 83%; }
.table-grid thead    th.col84 { width: 84%; }
.table-grid thead    th.col85 { width: 85%; }
.table-grid thead    th.col86 { width: 86%; }
.table-grid thead    th.col87 { width: 87%; }
.table-grid thead    th.col88 { width: 88%; }
.table-grid thead    th.col89 { width: 89%; }
.table-grid thead    th.col90 { width: 90%; }
.table-grid thead    th.col91 { width: 91%; }
.table-grid thead    th.col92 { width: 92%; }
.table-grid thead    th.col93 { width: 93%; }
.table-grid thead    th.col94 { width: 94%; }
.table-grid thead    th.col95 { width: 95%; }
.table-grid thead    th.col96 { width: 96%; }
.table-grid thead    th.col97 { width: 97%; }
.table-grid thead    th.col98 { width: 98%; }
.table-grid thead    th.col99 { width: 99%; }
.table-grid thead    th.col100 { width: 100%; }

</style><div class="wrapper"> 
            <h1>Countries of the World</h1>
            <div class="alphabet">
               <a href="#" class="active">All</a>
                <a href="#">A</a>
                <a href="#">B</a>
                <a href="#">C</a>
                <a href="#">D</a>
                <a href="#">E</a>
                <a href="#">F</a>
                <a href="#">G</a>
                <a href="#">H</a>
                <a href="#">I</a>
                <a href="#">J</a>
                <a href="#">K</a>
                <a href="#">L</a>
                <a href="#">M</a>
                <a href="#">N</a>
                <a href="#">O</a>
                <a href="#">P</a>
                <a href="#">Q</a>
                <a href="#">R</a>
                <a href="#">S</a>
                <a href="#">T</a>
                <a href="#">U</a>
                <a href="#">V</a>
                <a href="#">W</a>
                <a href="#">X</a>
                <a href="#">Y</a>
                <a class="last" href="#">Z</a>
            </div>

            <div id="conutries" class="table-grid">
                <table id="countries-table" class="bordered  gray">
                    <thead>
                        <tr>
                            <th class="col22 blue">
                                <label>Country Name</label><span></span>
                            </th>
                            <th class="col22 blue">
                                <label>University Name</label><span></span>
                            </th>
                        </tr>
                    </thead>
                   
                    <tr>
                        <td>Australia</td>
                        <td>Deakin University</td>
                    </tr>
                    <tr>
                        <td>Australia</td>
                        <td>Edith Cowan University</td>
                    </tr>
                    <tr>
                        <td>Australia</td>
                        <td>Flinders University</td>
                    </tr>
                   
                    <tr>
                        <td>Brazil</td>
                        <td>The Pontificia Universidade Catolica DO Rio Grande Do Sul ( PUCRS )</td>
                    </tr>
                   
                    <tr>
                        <td>Canada</td>
                        <td>George Brown College</td>
                    </tr>
                    <tr>
                        <td>China</td>
                        <td>Shandong Polytechnic University</td>
                    </tr>
                    <tr>
                        <td>Canada</td>
                        <td>University of Ontario Institute of Technology</td>
                    </tr>
                    <tr>
                        <td>Canada</td>
                        <td>University of Prince Edward Island (UPEI)</td>
                    </tr>
                    <tr>
                        <td>Canada</td>
                        <td>Vancouver Island University</td>
                    </tr>
                   
                    <tr>
                        <td>France</td>
                        <td>ESIGELEC – School of Engineering Rougen</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Ecole Pour L’ Informatique Et Les Techniques Avacees- EPITA</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>EM Normandie</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Group Euromed Management</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Institut D’ Etudes Politiques De Toulouse</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Sciences Po Lille</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Universite Angers</td>
                    </tr>
                   
                    <tr>
                        <td>Germany</td>
                        <td>Cologne Business School</td>
                    </tr>
                    <tr>
                        <td>Germany</td>
                        <td>Hochschule Osnabruck- University of Applied Sciences Osnabruck</td>
                    </tr>
                   
                    <tr>
                        <td>Neitherlands</td>
                        <td>Fontys University of Applied Sciences</td>
                    </tr>
                   
                    <tr>
                        <td>Switzerland</td>
                        <td>IMI International Hotel Management Institute Switzerland</td>
                    </tr>
                   
                    <tr>
                        <td>Taiwan</td>
                        <td>China Medical University</td>
                    </tr>
                    <tr>
                        <td>Taiwan</td>
                        <td>Providence University</td>
                    </tr>
                 
                    <tr>
                        <td>U.S.A</td>
                        <td>Central Michigan University</td>
                    </tr>
                    <tr>
                        <td>U.K</td>
                        <td>Glasgow Caledonian University</td>
                    </tr>
                    <tr>
                        <td>U.S.A</td>
                        <td>Purdue University</td>
                    </tr>
                    <tr>
                        <td>U.S.A</td>
                        <td>San Diego State University</td>
                    </tr>
                    <tr>
                        <td>U.S.A</td>
                        <td>University of Massachusetts, Lowell</td>
                    </tr>
                 
                </table>
            </div>       
    </div>

E com o corpo do fórum (lembrando que é você que tem que marcar a opção)
Código:
<script>
$(function () {
    var _alphabets = $('.alphabet > a');
    var _contentRows = $('#countries-table tbody tr');

    _alphabets.click(function () {     
        var _letter = $(this), _text = $(this).text(), _count = 0;
        if(_text == 'All') _text = '.';
        _alphabets.removeClass("active");
        _letter.addClass("active");

        _contentRows.hide();
        _contentRows.each(function (i) {
            var _cellText = $(this).children('td').eq(0).text();
            if (RegExp('^' + _text).test(_cellText)) {
                _count += 1;
                $(this).fadeIn(400);
            }
        });                 
    });
});


</script>
<style type="text/css">
  -/* stylesheet contains style for filtering alphabetical lists and tables
    http://www.faridesign.net
*/

.wrapper
{
    width: 680px;
    margin: 0 auto;
}

    .wrapper h1
    {
        color: #555;
        text-align: center;
        text-shadow: rgba(0, 0, 0, 0.15) 0px 0px 1px;
        letter-spacing: 2px;
    }

#conutries
{
    width: 650px;
    background: white;
}

.alphabet
{
    margin: 0 0 10px;
    overflow: hidden;
}

    .alphabet a, #countries-table tr
    {
        transition: background-color 0.3s ease-in-out;
        -moz-transition: background-color 0.3s ease-in-out;
        -webkit-transition: background-color 0.3s ease-in-out;
    }

    .alphabet a
    {
        width: 20px;
        float: left;
        color: #333;
        cursor: pointer;
        height: 20px;
        border: 1px solid #CCC;
        display: block;
        padding: 2px 2px;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
        border-right: none;
        text-decoration: none;
        background-color: #F1F1F1;
    }

        .alphabet a.first
        {
            border-radius: 3px 0 0 3px;
        }

        .alphabet a.last
        {
            border-right: 1px solid silver;
            border-radius: 0 3px 3px 0;
        }

        .alphabet a:hover,
        .alphabet a.active
        {
            background: #FBF8E9;
            font-weight: bold;
        }
      @charset "utf-8";
/* CSS Document */


.wrapper { width: 960px; margin: 0px auto; padding-top: 20px; min-height: 600px; }

.table-grid h1 { padding-top: 35px; font-size: 20px; }
.table-grid table { *border-collapse: collapse; /* IE7 and lower */    border-spacing: 0; width: 100%; font-family: 'trebuchet MS', 'Lucida sans', Arial; font-size: 12px; color:Black; }
.table-grid body td { padding: 5px 5px 5px 5px; min-width: 50px; height: 26px; }
.table-grid thead th
{
   

}

.table-grid tbody td label { display: block; text-transform: uppercase !important; font-size: 110%; }
.table-grid tbody td label { display: block; text-transform: uppercase; font-size: 105%; font-weight: bold; }
.table-grid tbody td span { display: block; opacity: .7; }

.table-grid thead th label { display: block; font-weight: 500; text-transform: uppercase; }
.table-grid thead th span { opacity: .7; }
.table-grid thead th.null { background: #fff; }

/* column rounded */

.table-grid table.bordered
{
    border: solid #ccc 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
}

.bordered tr:hover
{
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}   
   
.bordered td, .bordered th
{
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.table-grid table.gray thead th
{
    background-color: #F1F1F1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    background-image: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#EEE));
    background-image: -webkit-linear-gradient(top, whiteSmoke, #EEE);
    background-image: -moz-linear-gradient(top, whiteSmoke, #EEE);
    background-image: -ms-linear-gradient(top, whiteSmoke, #EEE);
    background-image: -o-linear-gradient(top, whiteSmoke, #EEE);
    background-image: linear-gradient(top, whiteSmoke, #EEE);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.table-grid table.blue thead th
{
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.table-grid table.bordered td:first-child, .bordered th:first-child { border-left: none; }
.table-grid table.bordered th { border-top: none; }
.table-grid table.bordered th:first-child { -moz-border-radius: 6px 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; }
.table-grid table.bordered th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; }
.table-grid table.bordered th:only-child { -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; }
.table-grid table.bordered tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; }
.table-grid table.bordered tr:last-child td:last-child { -moz-border-radius: 0 0 6px; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; }

.zebra td, .zebra th { padding: 10px; border-bottom: 1px solid #F2F2F2; }
.zebra tbody tr:nth-child(even) { background: #F5F5F5; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .<img src="http://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" /> inset; }

/* column colors */
.table-grid thead    th.blue { border-bottom: 2px solid #1FA2E1; }
.table-grid thead    th.black { border-bottom: 2px solid black; }
.table-grid thead    th.red { border-bottom: 2px solid red; }
.table-grid thead    th.green { border-bottom: 2px solid green; }
.table-grid thead    th.gray { border-bottom: 2px solid #ccc; }

/* column size */
.table-grid thead    th.col1 { width: 1%; }
.table-grid thead    th.col2 { width: 2%; }
.table-grid thead    th.col3 { width: 3%; }
.table-grid thead    th.col4 { width: 4%; }
.table-grid thead    th.col5 { width: 5%; }
.table-grid thead    th.col6 { width: 6%; }
.table-grid thead    th.col7 { width: 7%; }
.table-grid thead    th.col8 { width: 8%; }
.table-grid thead    th.col9 { width: 9%; }
.table-grid thead    th.col10 { width: 10%; }
.table-grid thead    th.col11 { width: 11%; }
.table-grid thead    th.col12 { width: 12%; }
.table-grid thead    th.col13 { width: 13%; }
.table-grid thead    th.col14 { width: 14%; }
.table-grid thead    th.col15 { width: 15%; }
.table-grid thead    th.col16 { width: 16%; }
.table-grid thead    th.col17 { width: 17%; }
.table-grid thead    th.col18 { width: 18%; }
.table-grid thead    th.col19 { width: 19%; }
.table-grid thead    th.col20 { width: 20%; }
.table-grid thead    th.col21 { width: 21%; }
.table-grid thead    th.col22 { width: 22%; }
.table-grid thead    th.col23 { width: 23%; }
.table-grid thead    th.col24 { width: 24%; }
.table-grid thead    th.col25 { width: 25%; }
.table-grid thead    th.col26 { width: 26%; }
.table-grid thead    th.col27 { width: 27%; }
.table-grid thead    th.col28 { width: 28%; }
.table-grid thead    th.col29 { width: 29%; }
.table-grid thead    th.col30 { width: 30%; }
.table-grid thead    th.col31 { width: 31%; }
.table-grid thead    th.col32 { width: 32%; }
.table-grid thead    th.col33 { width: 33%; }
.table-grid thead    th.col34 { width: 34%; }
.table-grid thead    th.col35 { width: 35%; }
.table-grid thead    th.col36 { width: 36%; }
.table-grid thead    th.col37 { width: 37%; }
.table-grid thead    th.col38 { width: 38%; }
.table-grid thead    th.col39 { width: 39%; }
.table-grid thead    th.col40 { width: 40%; }
.table-grid thead    th.col41 { width: 41%; }
.table-grid thead    th.col42 { width: 42%; }
.table-grid thead    th.col43 { width: 43%; }
.table-grid thead    th.col44 { width: 44%; }
.table-grid thead    th.col45 { width: 45%; }
.table-grid thead    th.col46 { width: 46%; }
.table-grid thead    th.col47 { width: 47%; }
.table-grid thead    th.col48 { width: 48%; }
.table-grid thead    th.col49 { width: 49%; }
.table-grid thead    th.col50 { width: 50%; }
.table-grid thead    th.col51 { width: 51%; }
.table-grid thead    th.col52 { width: 52%; }
.table-grid thead    th.col53 { width: 53%; }
.table-grid thead    th.col54 { width: 54%; }
.table-grid thead    th.col55 { width: 55%; }
.table-grid thead    th.col56 { width: 56%; }
.table-grid thead    th.col57 { width: 57%; }
.table-grid thead    th.col58 { width: 58%; }
.table-grid thead    th.col59 { width: 59%; }
.table-grid thead    th.col60 { width: 60%; }
.table-grid thead    th.col61 { width: 61%; }
.table-grid thead    th.col62 { width: 62%; }
.table-grid thead    th.col63 { width: 63%; }
.table-grid thead    th.col64 { width: 64%; }
.table-grid thead    th.col65 { width: 65%; }
.table-grid thead    th.col66 { width: 66%; }
.table-grid thead    th.col67 { width: 67%; }
.table-grid thead    th.col68 { width: 68%; }
.table-grid thead    th.col69 { width: 69%; }
.table-grid thead    th.col70 { width: 70%; }
.table-grid thead    th.col71 { width: 71%; }
.table-grid thead    th.col72 { width: 72%; }
.table-grid thead    th.col73 { width: 73%; }
.table-grid thead    th.col74 { width: 74%; }
.table-grid thead    th.col75 { width: 75%; }
.table-grid thead    th.col76 { width: 76%; }
.table-grid thead    th.col77 { width: 77%; }
.table-grid thead    th.col78 { width: 78%; }
.table-grid thead    th.col79 { width: 79%; }
.table-grid thead    th.col80 { width: 80%; }
.table-grid thead    th.col81 { width: 81%; }
.table-grid thead    th.col82 { width: 82%; }
.table-grid thead    th.col83 { width: 83%; }
.table-grid thead    th.col84 { width: 84%; }
.table-grid thead    th.col85 { width: 85%; }
.table-grid thead    th.col86 { width: 86%; }
.table-grid thead    th.col87 { width: 87%; }
.table-grid thead    th.col88 { width: 88%; }
.table-grid thead    th.col89 { width: 89%; }
.table-grid thead    th.col90 { width: 90%; }
.table-grid thead    th.col91 { width: 91%; }
.table-grid thead    th.col92 { width: 92%; }
.table-grid thead    th.col93 { width: 93%; }
.table-grid thead    th.col94 { width: 94%; }
.table-grid thead    th.col95 { width: 95%; }
.table-grid thead    th.col96 { width: 96%; }
.table-grid thead    th.col97 { width: 97%; }
.table-grid thead    th.col98 { width: 98%; }
.table-grid thead    th.col99 { width: 99%; }
.table-grid thead    th.col100 { width: 100%; }

</style><div class="wrapper"> 
            <h1>Countries of the World</h1>
            <div class="alphabet">
               <a href="#" class="active">All</a>
                <a href="#">A</a>
                <a href="#">B</a>
                <a href="#">C</a>
                <a href="#">D</a>
                <a href="#">E</a>
                <a href="#">F</a>
                <a href="#">G</a>
                <a href="#">H</a>
                <a href="#">I</a>
                <a href="#">J</a>
                <a href="#">K</a>
                <a href="#">L</a>
                <a href="#">M</a>
                <a href="#">N</a>
                <a href="#">O</a>
                <a href="#">P</a>
                <a href="#">Q</a>
                <a href="#">R</a>
                <a href="#">S</a>
                <a href="#">T</a>
                <a href="#">U</a>
                <a href="#">V</a>
                <a href="#">W</a>
                <a href="#">X</a>
                <a href="#">Y</a>
                <a class="last" href="#">Z</a>
            </div>

            <div id="conutries" class="table-grid">
                <table id="countries-table" class="bordered  gray">
                    <thead>
                        <tr>
                            <th class="col22 blue">
                                <label>Country Name</label><span></span>
                            </th>
                            <th class="col22 blue">
                                <label>University Name</label><span></span>
                            </th>
                        </tr>
                    </thead>
                   
                    <tr>
                        <td>Australia</td>
                        <td>Deakin University</td>
                    </tr>
                    <tr>
                        <td>Australia</td>
                        <td>Edith Cowan University</td>
                    </tr>
                    <tr>
                        <td>Australia</td>
                        <td>Flinders University</td>
                    </tr>
                   
                    <tr>
                        <td>Brazil</td>
                        <td>The Pontificia Universidade Catolica DO Rio Grande Do Sul ( PUCRS )</td>
                    </tr>
                   
                    <tr>
                        <td>Canada</td>
                        <td>George Brown College</td>
                    </tr>
                    <tr>
                        <td>China</td>
                        <td>Shandong Polytechnic University</td>
                    </tr>
                    <tr>
                        <td>Canada</td>
                        <td>University of Ontario Institute of Technology</td>
                    </tr>
                    <tr>
                        <td>Canada</td>
                        <td>University of Prince Edward Island (UPEI)</td>
                    </tr>
                    <tr>
                        <td>Canada</td>
                        <td>Vancouver Island University</td>
                    </tr>
                   
                    <tr>
                        <td>France</td>
                        <td>ESIGELEC – School of Engineering Rougen</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Ecole Pour L’ Informatique Et Les Techniques Avacees- EPITA</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>EM Normandie</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Group Euromed Management</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Institut D’ Etudes Politiques De Toulouse</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Sciences Po Lille</td>
                    </tr>
                    <tr>
                        <td>France</td>
                        <td>Universite Angers</td>
                    </tr>
                   
                    <tr>
                        <td>Germany</td>
                        <td>Cologne Business School</td>
                    </tr>
                    <tr>
                        <td>Germany</td>
                        <td>Hochschule Osnabruck- University of Applied Sciences Osnabruck</td>
                    </tr>
                   
                    <tr>
                        <td>Neitherlands</td>
                        <td>Fontys University of Applied Sciences</td>
                    </tr>
                   
                    <tr>
                        <td>Switzerland</td>
                        <td>IMI International Hotel Management Institute Switzerland</td>
                    </tr>
                   
                    <tr>
                        <td>Taiwan</td>
                        <td>China Medical University</td>
                    </tr>
                    <tr>
                        <td>Taiwan</td>
                        <td>Providence University</td>
                    </tr>
                 
                    <tr>
                        <td>U.S.A</td>
                        <td>Central Michigan University</td>
                    </tr>
                    <tr>
                        <td>U.K</td>
                        <td>Glasgow Caledonian University</td>
                    </tr>
                    <tr>
                        <td>U.S.A</td>
                        <td>Purdue University</td>
                    </tr>
                    <tr>
                        <td>U.S.A</td>
                        <td>San Diego State University</td>
                    </tr>
                    <tr>
                        <td>U.S.A</td>
                        <td>University of Massachusetts, Lowell</td>
                    </tr>
                 
                </table>
            </div>       
    </div>

Veja se agora resulta.



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Qui 30 Jan 2014, 12:51 pm

Resultou sim, eu estava colocando o código JS dentro da tag script...

Acho que estava errando na parte de colocar o código JS, sou meio lerdo ainda nisso....

Pois bem, vou editar o CSS fazer um modelo próprio.....

Depois trago o resultado...

Valeu cara ficou bem legal...

Edit:

quando edito algo na página o efeito deixa de funcionar, queria saber o porque de esta acontecendo isso?


Última edição por Houdini em Qui 30 Jan 2014, 1:22 pm, editado 1 vez(es)
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Qui 30 Jan 2014, 1:21 pm

Fico no aguardo para ver o resultado Very Happy



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Qui 30 Jan 2014, 1:25 pm

Como pode ver abaixo:

http://somosmugiwara.forumeiros.com/h40-#

Tava editando o CSS, mais quando salvei as alterações o efeito parou de funcionar...

Já tive problemas iguais desde a atualização nas páginas HTML que a forumeiros implantou... em algumas páginas minhas algumas classes de palavras e ID foram modificados quando salvei a página, creio que o mesmo está acontecendo aqui....
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Qui 30 Jan 2014, 2:03 pm

Olá, verifiquei o código e encontrei diversos erros, até mesmo no CSS o que estava bugando o código, tente isso
http://pastebin.com/DhwLFnwb

É só repetir essa parte
Código:
<tr>
          <td>Letra que vai começar, no caso aqui seria o L</td>
          <td>Descrição :D</td>
        </tr>

Caso não obtenha sucesso, edita em qualquer editor HTML, ou mesmo no Bloco de notas se for o caso..

Tutorial de tabelas aqui
http://www.ancibe.com.br/html/tabelas.html


Conteúdo da W3 sobre tabelas
http://www.w3.org/TR/html401/struct/tables.html

Espero que consiga agora Very Happy



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Qui 30 Jan 2014, 2:19 pm

Entendi como funciona esta parte....

mas o fato e que ainda quando salvo, edito e salvo novamente o efeito para de funcionar....

veja abaixo:

http://somosmugiwara.forumeiros.com/h40-

quando clico na letra A o efeito não aparece.....

num sei qual seria este problema...

a única coisa que alterei foi o :

Código:

.alphabet a:hover {
background: #333;
}

Não seria melhor colocar o CSS em uma outra página e adicionar nesta página, assim poderia editar tranquilamente....
Mais ainda teria o problema de ditar o HTML..
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Qui 30 Jan 2014, 2:22 pm

Você sabe usar o Google Drive? Ele pode ser usado para hospedar a página de CSS e os scripts
E qual dos editores você está usando?
tabela com várias abas Fcoi

O simples ou o avançado?



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Qui 30 Jan 2014, 2:37 pm

Estou usando o modo simples......

Humrum, mas tenho que ter uma conta ne...

eu uso um outro fórum que tenho....
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Qui 30 Jan 2014, 2:58 pm

Use o modo avançado, comigo ele não buga os códigos..
E você só precisa ter conta no Google mesmo '-'



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Qui 30 Jan 2014, 4:13 pm

Humrum, só que no modo avançado tem o problema de não ter como editar, pois existe um erro que já foi informado na forumeiros....

vou tentar colocar o js e o css separado, dou o resultado no chat...

Editado:

Tentei hospedar no google drive.

veja que o css nem o java funciona...

http://somosmugiwara.forumeiros.com/h39-

creio que fiz algo errado, poderia dizer como hospedar no google drive?
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Qui 30 Jan 2014, 5:14 pm

Abre o Google Drive
Ai clica no teu arquivo e clica em detalhes
tabela com várias abas LgRWNbf

E ai vai la em baixo e vai ter um campo chamado hospedagem, verifica se ele termina com a extensão do arquivo, por exemplo css.css ou scripts.js ai clica naquele link. Se ele abrir um arquivo tipo esse (não o conteúdo, a página no caso)
https://googledrive.com/host/0Bxaa_QAP8kJtNklndDk5dm5NcVU/js.js

Ai está é a página que você deve usar.



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Convidado em Qui 30 Jan 2014, 5:27 pm

O css e o html estão funcionando mais o javascript não está funcionando....

como podem ver:

http://somosmugiwara.forumeiros.com/h39-#

Código:

<script src="https://googledrive.com/host/0B34n0wN56OlASXBDdnFOektyZkk/java.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B34n0wN56OlASXBDdnFOektyZkk/css.css" />
<div class="wrapper">
   
   <h1>Countries of the World
   </h1>
   
   <div class="alphabet">
       <a href="#" class="active">All</a> <a href="#">A</a> <a href="#">B</a> <a href="#">C</a> <a href="#">D</a> <a href="#">E</a> <a href="#">F</a> <a href="#">G</a> <a href="#">H</a> <a href="#">I</a> <a href="#">J</a> <a href="#">K</a> <a href="#">L</a> <a href="#">M</a> <a href="#">N</a> <a href="#">O</a> <a href="#">P</a> <a href="#">Q</a> <a href="#">R</a> <a href="#">S</a> <a href="#">T</a> <a href="#">U</a> <a href="#">V</a> <a href="#">W</a> <a href="#">X</a> <a href="#">Y</a> <a class="last" href="#">Z</a>
   </div>
   
   <div id="conutries" class="table-grid">
      
      <table id="countries-table" class="bordered  gray">
         
         <thead>
            
            <tr>
               
               <th class="col22 blue">
                   <label>Country Name</label><span></span>
               </th>
               
               <th class="col22 blue">
                   <label>University Name</label><span></span>
               </th>
               
            </tr>
            
         </thead>
         
         <tbody>
            
            <tr>
               
               <td>
                   Australia
               </td>
               
               <td>
                   Deakin University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Australia
               </td>
               
               <td>
                   Edith Cowan University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Australia
               </td>
               
               <td>
                   Flinders University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Brazil
               </td>
               
               <td>
                   The Pontificia Universidade Catolica DO Rio Grande Do Sul ( PUCRS )
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Canada
               </td>
               
               <td>
                   George Brown College
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   China
               </td>
               
               <td>
                   Shandong Polytechnic University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Canada
               </td>
               
               <td>
                   University of Ontario Institute of Technology
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Canada
               </td>
               
               <td>
                   University of Prince Edward Island (UPEI)
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Canada
               </td>
               
               <td>
                   Vancouver Island University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   France
               </td>
               
               <td>
                   ESIGELEC – School of Engineering Rougen
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   France
               </td>
               
               <td>
                   Ecole Pour L’ Informatique Et Les Techniques Avacees- EPITA
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   France
               </td>
               
               <td>
                   EM Normandie
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   France
               </td>
               
               <td>
                   Group Euromed Management
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   France
               </td>
               
               <td>
                   Institut D’ Etudes Politiques De Toulouse
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   France
               </td>
               
               <td>
                   Sciences Po Lille
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   France
               </td>
               
               <td>
                   Universite Angers
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Germany
               </td>
               
               <td>
                   Cologne Business School
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Germany
               </td>
               
               <td>
                   Hochschule Osnabruck- University of Applied Sciences Osnabruck
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Neitherlands
               </td>
               
               <td>
                   Fontys University of Applied Sciences
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Switzerland
               </td>
               
               <td>
                   IMI International Hotel Management Institute Switzerland
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Taiwan
               </td>
               
               <td>
                   China Medical University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   Taiwan
               </td>
               
               <td>
                   Providence University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   U.S.A
               </td>
               
               <td>
                   Central Michigan University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   U.K
               </td>
               
               <td>
                   Glasgow Caledonian University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   U.S.A
               </td>
               
               <td>
                   Purdue University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   U.S.A
               </td>
               
               <td>
                   San Diego State University
               </td>
               
            </tr>
            
            <tr>
               
               <td>
                   U.S.A
               </td>
               
               <td>
                   University of Massachusetts, Lowell
               </td>
               
            </tr>
            
         </tbody>
         
      </table>
      
   </div>
   
</div>
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por waghcwb em Qui 30 Jan 2014, 5:41 pm

Isso porque você inseriu a tag script em um documento .js, apague isso
tabela com várias abas Q6OVouJ

E acho que é melhor usar o último CSS e HTML que eu passei que ja estão desbugados...



The quieter you become, the more you are able to hear

tabela com várias abas Btn_viewmy_160x25_pt_BR



study

Conteúdo patrocinado

tabela com várias abas Empty Re: tabela com várias abas

Mensagem por Conteúdo patrocinado


    Data/hora atual: Qui 14 Nov 2019, 3:04 pm