avoid line break within a table, or minimum size

Asked

Viewed 23,335 times

1

Galley is possible to determine a maximum and minimum size for a table?

My problem and the next, I have a table with a text inside it, and when I decrease the size of the window of the navigate everything gets squeezed inside it.

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

Good follows the simple code of the table. If anyone knows any way to help me I am 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

html css

  • have tried white-space: nowrap? only the notorious scrollbar will not appear.

  • already yes, I just don’t know if I did it correctly, have you make an example in my code? posted it in the link

  • https://jsfiddle.net/9zecwuyt/3/

  • in any case, before continuing to use Tables to assemble your layout, read this: https://www.hotdesign.com/seybold/everything.html

  • worked, so for layout I always use div and css, but as it comes to a simple report layout I prefer to use the table

  • how can I use white_space in div? look at the menu that matches:https://jsfiddle.net/9zecwuyt/4/

  • A tip: Always put the code inside the question.

Show 2 more comments

3 answers

3

To avoid breaking row in table use white-space: nowrap;.

In external css:

.classDaSuaTRouTD{

   white-space: nowrap;

}

In css inline:

style= "white-space: nowrap;

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

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

  • ok and how can I do this in a div? look at mine that I rode, it presents line break within the div. https://jsfiddle.net/9zecwuyt/4/

  • Friend will be that using the <a> tag is only the best solution, so I noticed seems to be a menu, try to use list, can solve your problem by putting it inline

  • could give me an example of how to do it right?

1


Try using this:

table {
 table-layout:fixed;
 width:100%;
 border:1px solid #f00;
 word-wrap:break-word;
}
  • 3

    Please do not use try in response, it is correct to comment when you are not sure if it works. Now if you are sure, explain to AP your answer.

0

I believe I 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 put the parameter min-width when the screen decreases your div will decrease along, but if it reaches 100px it will no longer decrease. And with the max-width the div would not exceed 200px.

To keep the scroll bar you can use the 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 answer,so if you have any comment error,if you do not answer the question ignore(and mark negative Y-Y).

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.