dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 20

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

  1. #1
    Join Date
    Oct 2016
    Posts
    44

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

    Hello.
    I want a table to have a specified width in each column. The table.style.width should be the sum of all those specified widths, or that sum plus the number of borders horizontally?
    Thank you.

  2. #2
    Join Date
    Dec 2012
    Posts
    1,587
    I created a test table und it adjusted it's width to the widths of the cells. Thus your requirement is fullfilled without further measures?

  3. #3
    Join Date
    Oct 2016
    Posts
    44
    I have a table in which I want its columns to have exactly the specified width. I am specifying it in the first row of <th>s, the table has table-layout: fixed, overflow and word-breaks are ok, but still the columns don't have the width I tell them to have. I measure their width using Chrome Dev Tools, hovering the elements.
    I will later post the code.

  4. #4
    Join Date
    Oct 2016
    Posts
    44
    I have a table in which I want its columns to have exactly the specified width. I am specifying it in the first row of <th>s, the table has table-layout: fixed, overflow and word-breaks are ok, but still the columns don't have the width I tell them to have. I measure their width using Chrome Dev Tools, hovering the elements.
    I will later post the code.

  5. #5
    Join Date
    Oct 2016
    Posts
    44
    Oops, duplicated post.

    Here is the code for the table in which I am having problems:

    link because I can't post the code without losing everything

    I use Chrome and a 1366px x 638px area for it (I am saying this because there is a width:100px).

    The problem is: The first row of <th>s specified the widths of the columns, the table layout is fixed and I saw somewhere on Internet that the table needs to have the same width as the columns, otherwise the browser will choose another way to get the width for each column, but still the columns don't have the width they should.

    Could you help me find what's wrong here, or should I create a new thread?

  6. #6
    Join Date
    Dec 2012
    Posts
    1,587
    For me it looks fine: E. g. 3rd column: Width specified in HTML = 232px, plus padding = 2*5px plus border = 1px results in 243px which is the same value as the developer tools indicate for this column.

  7. #7
    Join Date
    Oct 2016
    Posts
    44
    It looks that with window width > 1350px the table starts growing, so I see the 3rd column with 247px. And I don't want it to include padding. I want it to have the width I told it to. The text and the rest should adjust itself to the space.

  8. #8
    Join Date
    Dec 2012
    Posts
    1,587
    I see, when the window is very wide, the table starts growing. The only way I found to prevent this was applying a fixed width to the table. Is this an option for you?

    And I don't want it to include padding. I want it to have the width I told it to.
    I'm afraid that this cannot be changed. You need to include padding and border in your calculation, i. e. reduce the width by these.
    Last edited by Sempervivum; 08-06-2017 at 04:48 PM.

  9. #9
    Join Date
    Oct 2016
    Posts
    44
    Yes, this page will only be seen by me in my screen, which will not change. That's why I wanted to know how to calculate the fixed width.

    OFFTOPIC: this forum looks very buggy, I already had to rewrite posts several times, which is starting to annoying me.

  10. #10
    Join Date
    Oct 2016
    Posts
    44
    What should be the "fixed width"? Do I have to recalculate it everytime I change the width of a column?

  11. #11
    Join Date
    Dec 2012
    Posts
    1,587
    Recalculation can be done by this javascript:
    Code:
        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;
    Place it at the end of the body, before the closing </body>.
    Remove width: 100% in the CSS.

  12. #12
    Join Date
    Oct 2016
    Posts
    44
    I can't put it right at the end of the file because the server is going to append more rows at the end. It doesn't even have a body tag, the browser auto-creates it.
    Does it work between some rows (<tr>s)? Or I could somehow put some code before the table which would add this javascript to the end so it runs after all table is loaded.

  13. #13
    Join Date
    Dec 2012
    Posts
    1,587
    It would be sufficient if you placed it directly below the table. If this is not possible add onload like this:
    Code:
        window.onload = function () {
            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;
        }

  14. #14
    Join Date
    Oct 2016
    Posts
    44
    Ok thank you. But now the 3rd collumn always have 246px width. SpecifiedWidth+border+2xPadding = 232+1+2x5 = 243.
    And shouldn't the script set the size in css? (tbl.style.width)

  15. #15
    Join Date
    Dec 2012
    Posts
    1,587
    What browser do you use? I'm using Opera and the result is correct:tablesize.jpg

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