1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How can I control widths on table th and td tags?

Discussion in 'CSS' started by SoftLink, Mar 8, 2023.

0
  1. #1
    I have 2 tables. The css for both include: table-layout:fixed.
    The css for both tables is exactly the same yet the widths of the td tags are different based on the content in the given tag.

    Why is table-layout:fixed; not working?
    More importantly, how can I control the widths of the td tags in a table?

    deathshadow - help?

    
<html>
  <head>
  <meta charset="utf-8"><title>AEC Performance Report</title>
  <style>
  *{  box-sizing:border-box;}
  body {
  font-size:10pt;
  font-weight:normal;  
  font-family:verdana, arial, Sans-Serif;
  color:#000000;
  background:#ffffff;
  max-width:816px;
  margin:0;
  }
  
  .divTblCrsTbRptTable{
  display:inline-block;
  min-width:40%;
  text-align:left;
  margin:0 auto;
  }
  .tblCrsTbRptTable{
  table-layout:fixed;
  border-collapse:collapse;
  }  
  .tdScrCrsTbRptXHdr{
  color:#002960;
  font-weight:bold;
  text-align:center;
  border:1px solid #273e56;
  padding:4px;
  }
  .thScrCrsTbRptXCntAvgHdr{
  width:50px;
  max-width:50px;
  color:#002960;
  font-weight:bold;
  text-align:center;
  border:1px solid #273e56;
  padding:4px;
  }  
  .thScrCrsTbRptY{
  color:#002960;
  font-weight:bold;
  text-align:center;
  border:1px solid #273e56;
  padding:4px;
  }  
  .tdCrsTbRptTableAvg{
  text-align:center;
  border:.5px solid #002960;
  }
  .tdCrsTbRptTableCnt{
  text-align:center;
  border:.5px solid #002960;
  }
  </style>
  </head>
  <body onload="bodyOnLoad();">
  <div class='divTblCrsTbRptTable' 'max-width:618px' >
  <table id="tbl1" class='tblCrsTbRptTable' style='table-layout:fixed; max-width: 618px;'>
  <tr class='trScrCrsTbRptXHead'><th class='thScrCrsTbRptY' style='width:80px;' ></th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Avg</th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Cnt</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:46px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:71px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:66px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:78px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:85px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:54px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:88px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:73px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:59px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:67px;' >a</th>
  </tr>
  </table>
  <table id="tbl2" class='tblCrsTbRptTable' style='table-layout:fixed; max-width: 618px;'>
  <tr class='trScrCrsTbRptXHead'>
  <th class='thScrCrsTbRptY' style='width:80px;' ></th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Avg</th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Cnt</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:46px;' >Ben Nove</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:71px;' >Brian Webster</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:66px;' >Bryan Borland</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:78px;' >Chuck Chapman</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:85px;' >David Domzalski</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:54px;' >Irving Herzog</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:88px;' >John Koszewnik</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:73px;' >Paul Goodwin</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:59px;' >Susie Guerra</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:67px;' >Terry Sullivan</th>
  </tr>
  </table>
  </div>
  
<script>
  function bodyOnLoad() {
  dispTdWidths();
  }
  function dispTdWidths() {
  var tbl1 = document.querySelector("#tbl1"), tbl2 = document.querySelector("#tbl2"), rct;
  var arTh1 = tbl1.querySelectorAll(".tdScrCrsTbRptXHdr"), arTh2 = tbl2.querySelectorAll(".tdScrCrsTbRptXHdr");
  
  for(let i=0; i < arTh1.length; i++) {
  rct = arTh1[i].getBoundingClientRect();
  console.log(arTh1[i].innerHTML + " style: " + arTh1[i].style.width + " : " + rct.width);
  }
  console.log(" \n ");
  for(let i=0; i < arTh2.length; i++) {
  rct = arTh2[i].getBoundingClientRect();
  console.log(arTh2[i].innerHTML + " style: " + arTh2[i].style.width + " : " + rct.width);
  }
  }
  
  </script>
  </body>
</html>
    Code (markup):
     
    Solved! View solution.
    Last edited: Mar 8, 2023
    SoftLink, Mar 8, 2023 IP
  2. #2
    Not deathshadow...

    I just added width:100%; to

    .tblCrsTbRptTable{
    table-layout:fixed;
    border-collapse:collapse;
    width:100%;
    }

    and it fixed it.

    https://jsfiddle.net/z89brsap/

    <html>
  <head>
  <meta charset="utf-8"><title>AEC Performance Report</title>
  <style>
  *{  box-sizing:border-box;}
  body {
  font-size:10pt;
  font-weight:normal; 
  font-family:verdana, arial, Sans-Serif;
  color:#000000;
  background:#ffffff;
  max-width:816px;
  margin:0;
  }
 
  .divTblCrsTbRptTable{
  display:inline-block;
  min-width:40%;
  text-align:left;
  margin:0 auto;
  }
  .tblCrsTbRptTable{
  table-layout:fixed;
  border-collapse:collapse;
  width:100%;
  } 
  .tdScrCrsTbRptXHdr{
  color:#002960;
  font-weight:bold;
  text-align:center;
  border:1px solid #273e56;
  padding:4px;
  }
  .thScrCrsTbRptXCntAvgHdr{
  width:50px;
  max-width:50px;
  color:#002960;
  font-weight:bold;
  text-align:center;
  border:1px solid #273e56;
  padding:4px;
  } 
  .thScrCrsTbRptY{
  color:#002960;
  font-weight:bold;
  text-align:center;
  border:1px solid #273e56;
  padding:4px;
  } 
  .tdCrsTbRptTableAvg{
  text-align:center;
  border:.5px solid #002960;
  }
  .tdCrsTbRptTableCnt{
  text-align:center;
  border:.5px solid #002960;
  }
  </style>
  </head>
  <body onload="bodyOnLoad();">
  <div class='divTblCrsTbRptTable' 'max-width:618px' >
  <table id="tbl1" class='tblCrsTbRptTable' style='table-layout:fixed; max-width: 618px;'>
  <tr class='trScrCrsTbRptXHead'><th class='thScrCrsTbRptY' style='width:80px;' ></th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Avg</th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Cnt</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:46px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:71px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:66px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:78px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:85px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:54px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:88px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:73px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:59px;' >a</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:67px;' >a</th>
  </tr>
  </table>
  <table id="tbl2" class='tblCrsTbRptTable' style='table-layout:fixed; max-width: 618px;'>
  <tr class='trScrCrsTbRptXHead'>
  <th class='thScrCrsTbRptY' style='width:80px;' ></th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Avg</th>
  <th class='thScrCrsTbRptXCntAvgHdr'>Cnt</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:46px;' >Ben Nove</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:71px;' >Brian Webster</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:66px;' >Bryan Borland</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:78px;' >Chuck Chapman</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:85px;' >David Domzalski</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:54px;' >Irving Herzog</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:88px;' >John Koszewnik</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:73px;' >Paul Goodwin</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:59px;' >Susie Guerra</th>
  <th colspan='2' class='tdScrCrsTbRptXHdr' style='width:67px;' >Terry Sullivan</th>
  </tr>
  </table>
  </div>
 
<script>
  function bodyOnLoad() {
  dispTdWidths();
  }
  function dispTdWidths() {
  var tbl1 = document.querySelector("#tbl1"), tbl2 = document.querySelector("#tbl2"), rct;
  var arTh1 = tbl1.querySelectorAll(".tdScrCrsTbRptXHdr"), arTh2 = tbl2.querySelectorAll(".tdScrCrsTbRptXHdr");
 
  for(let i=0; i < arTh1.length; i++) {
  rct = arTh1[i].getBoundingClientRect();
  console.log(arTh1[i].innerHTML + " style: " + arTh1[i].style.width + " : " + rct.width);
  }
  console.log(" \n ");
  for(let i=0; i < arTh2.length; i++) {
  rct = arTh2[i].getBoundingClientRect();
  console.log(arTh2[i].innerHTML + " style: " + arTh2[i].style.width + " : " + rct.width);
  }
  }
 
  </script>
  </body>
</html>
    Code (markup):
     
    qwikad.com, Mar 8, 2023 IP
    SoftLink likes this.
  3. SoftLink

    SoftLink Active Member

    Messages:
    103
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #3
    Thanks. I was setting the max-length of the table. Apparently that was what was destroying the <td> widths.
    I ended up just not setting a css/style for the table element at all and that worked fine.
     
    SoftLink, Mar 10, 2023 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    When was this HTML written, 1997?

    If you want them the same width, why are they separate tables?

    What the blazes do you think you need that script for here, and why are you setting up an onload in the most convoluted and possibly insecure manner?

    If they are all table headings, where's the data they're headings FOR? Much less where's their SCOPE? THEAD? TBODY? You asked to control TD when you don't even have any! Much less all those colspan (currently for nothing) so we really would/should see your TD before weighing in. And if there are not TD what makes these a table, much less two of them?

    Why are you declaring things in pixels telling users with accessibility needs to f*** off?

    What's your plan for when the screen is too small?

    What's with the "DIV for nothing" around them?

    I'm not sure what you're actually trying to accomplish, I'm just sure that what you have isn't it. Or at least isn't something you should be trying to do in the first place!
     
    deathshadow, Mar 29, 2023 IP
  5. SoftLink

    SoftLink Active Member

    Messages:
    103
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #5
    deathshadow: I just saw your reply. Thanks - no it was 1942 (I'm old) lol.

    Please realize, this is SaaS, not pretty websites.

    OK, this is only part of the whole thing - so I can isolate the problem (that is, there are td tags below the headers in the actual report).
    Multiple tables because the columns are different (not all the same width). It's a grid with the columns split up to accommodate a maximum width for the page.
    That is, the total columns (each a specific width based on content) make up a table that's wider than the page.
    The columns in a 'table' are the most that I can include without going past the right edge of the page.
    This is really generated in php, server side so anything Javascript or getBoundingClientRect are not possible.
    The javascript here is only to show the problem.
    This is really for a printable report to be exported via PHP in html, PDF or Word, each page having specific dimensions.

    I'm using PHPWord (a nightmare) and mPDF (another nightmare). They severely restrict both html and css.
    Things like inline-block and margins are out of the question.

    "onload in the most convoluted and possibly insecure": please elaborate. What's wrong with the onload?
    "pixels telling users with accessibility needs to f*** off": again, it's for printable reports but how does px hurt accessibility?
    These reports are *not* to be responsive. They are in pages having specific dimensions, again to be printable.

    I think I did delete the 'div for nothing'. It's an evolution from an editable page. I agree, it has no purpose here.

    You are one intense individual :)
    Thanks for the response. I did solve it.
     
    SoftLink, Apr 12, 2023 IP