dcsimg
www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 20 of 20

Thread: How to know what's the right width for a table?

  1. #16
    Join Date
    Oct 2016
    Posts
    44
    I am using Chrome.
    Is Chrome Dev Tools also from Opera? (Or in your image that is not Chrome Dev Tools?)
    And Oops I hadn't update the online table, I am changing one in my computer. Please try again if you are using the link I gave you.
    Table; Image

  2. #17
    Join Date
    Dec 2012
    Posts
    1,391
    AFAIK Chrome and Opera are using the same engine.
    Unlike your image, for me both, Opera and chrome, are indication 243px.
    Don't know why there is a discrepancy.

  3. #18
    Join Date
    Oct 2016
    Posts
    44
    It looks to be changing with different window sizes. With window width > 1352px, reloading the page the 3rd column width goes bigger than 243.
    When maximized my window has 1366px width.

  4. #19
    Join Date
    Dec 2012
    Posts
    1,391
    Yes, this procedure doesn't work when the initial width of the window is larger than the width of the table.
    Try this instead:
    Code:
        <style>
    
            /* your CSS here */
    
             #tblwrapper {
                width: 50px;
                display: none;
            }
            #tblwrapper.ready {
                width: auto;
                display: block;
            }
        </style>
        <div id="tblwrapper">
    
            <!-- your table here -->
    
        </div>
        <script>
            var tbl = document.querySelector("table");
            var firstrow = tbl.rows[0];
            var totalwidth = 0;
            for (var i = 0; i < firstrow.cells.length; i++) {
                totalwidth += firstrow.cells[i].offsetWidth;
            }
            tbl.width = totalwidth;
            tblwrapper.classList.add("ready");
        </script>

  5. #20
    Join Date
    Oct 2016
    Posts
    44
    Thank you, looks working right, now.
    Is there any difference between using
    Code:
    tbl.width = totalwidth;
    or
    Code:
    tbl.style.width = totalwidth+"px";
    ?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles