Table getting different size on multiple monitors

0

the same as the following table:

 <div id="page-wrapper">
             <table class="col-xs-12 col-sm-12 col-md-12 col-lg-12 fm-table" >  
                <tr>
                    <td class="col-xs-6 col-sm-6 col-md-3 col-lg-3 fm-left"> 
                        <ul class="fm-tree-directory">

                        </ul>
                    </td>
                </tr> 
            </table>
        </div>

and a css:

.fm-tree-directory {
 max-height: 750px;
 min-height: 750px;
 list-style: none;
 padding: 0;
 margin: 0;
 vertical-align: top;
 width: 100%;
 height: 100%;

The problem that in the footer is passing on some monitors, and in others it is far from the footer. How to leave the same size for the footer always, since the table gets different sizes always. I tried to set the minimum and maximum percentage, but it has no effect.

    
asked by anonymous 06.04.2015 / 20:27

1 answer

1

In my view the use of tables for layouts is a bit complex and not considered appropriate, especially if you use these bootstrap classes that are made for the use of elements such as div ( block or inline-block ).

  

Note that in bootstrap also has classes for tables, but they are all for tabular data.

What is Tableless

Tableless is a way to develop html / xhtml pages without using tables for content layout on the page suggested by the W3C in 2002 , because it advocates that HTML codes should be used for the purpose they were created, and tables were created to display tabular data. For the layout of the page the recommended would be to use CSS combined with elements of type <div> to split layout and <span> to inline elements as text formatting, outside other tags.

Source: link

Possible solution

If your html is just that, I recommend changing everything to tags used for layout (in this case I will provide an example only with DIVs):

<div id="page-wrapper">
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 fm-table">  
        <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 fm-left"> 
            <ul class="fm-tree-directory">
               <li>Olá mundo</li>
            </ul>
        </div>
    </div>
</div>
  

Note: But you did not just post part of CSS and HTML, so we can not test it. If it does not work, edit your question.

    
07.04.2015 / 20:11