avoid line breaks within a table, or minimum size

Navigation
1

Is it possible to determine a maximum and minimum size for a table?

My problem is the following, I have a table with a text inside it, and when I decrease the size of the browse window everything is getting squeezed inside it.

I touched that the problem only occurs if I use width: 100%; because if I use the width: 400px; the table does not flatten its contents, but it generates a scroll bar, and that's exactly what I want.

Good follows the simple table code. If anyone knows any way to help me, I'm very grateful. 

.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>

code in jsfiddle

    
asked by anonymous 19.02.2016 / 17:34

3 answers

1

Try using this: 

table {
 table-layout:fixed;
 width:100%;
 border:1px solid #f00;
 word-wrap:break-word;
}
    
20.01.2018 / 18:48
1

To avoid line break in table use white-space: nowrap; .

In external css: 

.classDaSuaTRouTD{

   white-space: nowrap;

}

In css inline : 

style= "white-space: nowrap;

As for defining the minimum size you can by classes in <tr> and in <td> defining via css the width and height of them, but using only white-space: nowrap; the word already suits your table .

NOTE: Place the code on the tr or td where the line break is occurring

    
19.02.2016 / 19:16
0

I think you can use 2 parameters, one to set the minimum and the other to the maximum width: 

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

If you set the parameter min-width when the screen decreases your div will decrease together, however if it reaches 100px it will not decrease further. And with max-width the div would not exceed 200px.

To be able to keep the scroll bar you can use overflow to define if it will appear: 

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*/
}

In your code it could look like this: 

.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*/;
}

To tell you the truth, this is my first response, so if you have any errors, please do not answer the question ignore (and check negative Y-Y).

    
15.06.2016 / 03:09
How to read text files online? Send id in a hidden field when clicking on an autocomplete.js item