1

Galera e possível determinar um tamanho máximo e mínimo para um tabela?

O meu problema e o seguinte, tenho uma tabela com um texto dentro dela, e quando eu diminuo o tamanho da janela do navegar tudo vai ficando espremido dentro dela.

Toquei que o problema so ocorre se eu usar o width: 100%; pois se eu usar o width: 400px; o tabela não achata o seu conteúdo, porem gera uma barra de rolagem, e é exatamente isso que eu quero.

Bom segue o código simples da tabela. Se alguém souber alguma forma de me ajudar fico muito grato.

.layout_geral_fixo {
    position: fixed;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background: #484848;
    z-index: 6;
    height: 37px;
}
   <table class="layout_geral_fixo">
            <!-- Menu topo -->

            <tr>
                <td>
asasdasdasdasdasdasdasdasdasdasdasdasdasdasd asdasdasdasdasdasdasd

                </td>
            </tr>

            <!-- FIM Menu topo -->
        </table>

código no jsfiddle

7
  • já tentou white-space: nowrap? só não vai aparecer a famigerada barra de rolagem. 19/02/2016 às 16:50
  • já sim, so não sei se eu fiz de forma correta, tem com vc fazer um exemplo no meu código? postei ele no link 19/02/2016 às 16:55
  • jsfiddle.net/9zecwuyt/3 19/02/2016 às 17:13
  • em todo caso, antes de continuar utilizando tables para montar o seu layout, leia isto: hotdesign.com/seybold/everything.html 19/02/2016 às 17:16
  • funcionou, então para layout eu sempre uso div e css, porém como se trata de um layout simples de relatório eu prefiro usar a tabela 19/02/2016 às 18:14

3 Respostas 3

3

Para evitar quebra de linha em tabela use white-space: nowrap;.

No css externo:

.classDaSuaTRouTD{

   white-space: nowrap;

}

No css inline:

style= "white-space: nowrap;

Quanto a definir o tamanho mínimo você pode por classes nas <tr> e nas <td> definindo via css a largura e altura delas, mas usando apenas o white-space: nowrap; a palavra já se adequa a sua table.

OBS: coloque o código na tr ou td aonde está ocorrendo a quebra de linha

3
  • ok e como posso fazer isso em uma div? olha so o meu que montei, ele apresenta quebra de linha dentro da div. jsfiddle.net/9zecwuyt/4 19/02/2016 às 18:25
  • Amigo será que usar a tag <a> apenas é a melhor solução, pelo que notei parece ser um menu, tente usar lista, pode resolver seu problema colocando ela inline 19/02/2016 às 19:05
  • poderia me dar um exemplo de com fazer de forma correta? 19/02/2016 às 19:14
1

Tente usar este:

table {
 table-layout:fixed;
 width:100%;
 border:1px solid #f00;
 word-wrap:break-word;
}
1
  • 3
    Favor, não utilize tente em resposta, o correto é comentar quando não se tem a certeza de que funciona. Agora se tem a plena certeza, explique ao AP sua resposta.
    – NoobSaibot
    20/01/2018 às 18:11
0

Acredito que possa usar 2 parametros,um para definir o minimo e o outro para o maximo de largura:

div.umaclasse {
min-width:100px;
max-width:200px;
}

Se colocar o parametro min-width quando a tela diminuir a sua div irá diminuir junto,porém se chegar a 100px não ira mais diminuir.E com o max-width a div não passaria de 200px.

Para poder ficar com a barra de rolagem podes usar o overflow para definir se ira aparecer:

div.umaclasse {
max-width:100px;       /*esta div tem muito conteudo para apenas 100px*/
overflow:scroll;       /*com isso a barra de rolagem estará sempre habiltada,mas se deixar auto a barra só aparecece se necessário*/
}

No seu código poderia ficar assim:

.layout_geral_fixo {
    position: fixed;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background: #484848;
    z-index: 6;
    height: 37px;
    min-width:100px;/*valor minimo px,cm,% etc.*/;
    max-width:200px;/*valor maximo px,,cm,% etc.*/;
    overflow:scroll/*valores:auto,hidden,visible,scroll*/;
}

Pra falar a verdade ésta é minha primeira resposta,então se tiver qualquer erro comente,caso não responda a pergunta ignore(e marque negativo Y-Y).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .