LinuxQuestions.org - HTML How to get thead and tbody to align

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - HTML How to get thead and tbody to align (https://www.linuxquestions.org/questions/programming-9/html-how-to-get-thead-and-tbody-to-align-4175649266/)

Quote:

Originally Posted by Turbocapitalist (Post 5969807)

What were the CSS specialists on the mailing list able to figure out? Or did they not respond?

No response yet and I didn't pursue it.

Continuing to play with this ...

I'm finding that style.width and offsetWidth are not the same. That is mostly explained here: https://stackoverflow.com/questions/...twidth-in-html

This is probably why the author of https://codereview.stackexchange.com...igning-columns uses a Property Value:

Code:

  // get inner width because thats what we will set

    tempResult = window.getComputedStyle(thElements[i], null)

      .getPropertyValue("width");

    width[i] = `${tempResult.toString()}`;

I'm trying this, but I don't get what's happening here. I have:

Code:

var tmp = window.getComputedStyle(thElements[0], null);

.getPropertyValue("width");

alert("width: " + thElements[0].style.width + "\noffsetWidth: " + thElements[0].offsetWidth +

"\ncomputedWidth: " + `${tmp.toString()}`);

With the .getPropertyValue line commented my alert gives:

Code:

width: 100px

offsetWidth: 110

computedWidth: [object CSS2Properties]

With the .getPropertyValue line uncommented the function doesn't run. What am I doing wrong here?

Furthermore, I'm unfamiliar with the `${tmp.toString()}` construct. I've googled for examples and explanations, but no luck so far. What does it do?

OK, I figured it out. The .getPropertyValue should be bolted onto the preceeding getComputedStyle() function. Don't know why it doesn't show that way in the link. Also, the `${tmp.toString()}` construct is a bit over-complicated. tmp.toString() will do. Still, if anyone can tell me what that whole `${ ... }` syntax is supposed to do, I'd appreciate it.

My final javascript function is below and that works just fine. I've already used it on a customer website. No need to mess with CSS at all; no <thead> or <tbody> needed:

Code:

/* Adust table columns for use in scrolling long reports

  Ref. https://www.linuxquestions.org/questions/programming-9/html-how-to-get-thead-and-tbody-to-align-4175649266/



  t1 - <table> ID of table containing <th> headers

  t2 - <table> ID of table containing <td> columns

  mode - 1 use <th> width

          2 use <td> width

          (other) use greater of <th> and <td>

*/



function adjustCols(t1, t2, mode)

{

    var tbl1 = document.getElementById(t1);

    var thElements = tbl1.getElementsByTagName("th");



    var tbl2 = document.getElementById(t2);

    var tdElements = tbl2.getElementsByTagName("td");



    for (var i = 0; i < thElements.length; i++)

    {

        var thWidth = window.getComputedStyle(thElements[i], null).getPropertyValue("width").toString();

        var tdWidth = window.getComputedStyle(tdElements[i], null).getPropertyValue("width").toString();

        

        switch (mode) {

        case 1:                // set <td>'s to width of corresponding <th>

            tdElements[i].style.width = thWidth;

            break;

            

        case 2:                // set <th>'s to width of corresponding <td>

            thElements[i].style.width = tdWidth;

            break;

            

        default:              // use the greater width of either the <th> or the <td>

            if (thWidth > tdWidth) tdElements[i].style.width = thWidth;



            else if (tdWidth > thWidth) thElements[i].style.width = tdWidth;

            break;

        }

    }

}

All that needs to be done is for the header row and data rows to be in separate tables, and the data table needs the <Div> set for scrolling. For example:

Code:

<body onload="adjustCols('tblHeader', 'tblData', 0)">



<table id="tblHeader">

<tr><th>The</th><th>rain</th><th>in</th><th>Spain</th></tr>

</table>



<div style="height: 80px; float: left; overflow-y: auto">

<table id="tblData">

<tr><td>Falls mainly</td><td>In the Plain</td><td>Falls mainly</td><td>In the Plain</td></tr>

<tr><td>Falls mainly</td><td>In the Plain</td><td>Falls mainly</td><td>In the Plain</td></tr>

<tr><td>Falls mainly</td><td>In the Plain</td><td>Falls mainly</td><td>In the Plain</td></tr>

<tr><td>Falls mainly</td><td>In the Plain</td><td>Falls mainly</td><td>In the Plain</td></tr>

<tr><td>Falls mainly</td><td>In the Plain</td><td>Falls mainly</td><td>In the Plain</td></tr>

<tr><td>Falls mainly</td><td>In the Plain</td><td>Falls mainly</td><td>In the Plain</td></tr>

<tr><td>Falls mainly</td><td>In the Plain</td><td>Falls mainly</td><td>In the Plain</td></tr>

<tr><td>Falls mainly</td><td>In the Plain</td><td>Falls mainly</td><td>In the Plain</td></tr>

<tr><td>Falls mainly</td><td>In the Plain</td><td>Falls mainly</td><td>In the Plain</td></tr>

</table>

</div>

Quote:

Originally Posted by mfoley (Post 5970912)

My final javascript function is below and that works just fine. I've already used it on a customer website. No need to mess with CSS at all:

I keep trying to find time to play with this. Glad you found a solution.

Just wondering...what happens if the visitor is using a javascript blocker?

Quote:

Originally Posted by scasey (Post 5970915)

Just wondering...what happens if the visitor is using a javascript blocker?

The answer to that question is less than desirable. Here are four links to a copy of Jahn Rentmeister's blog post. The original is missing and this, the last remaining copy, is broken up into four pieces making it harder to read through to its conclusion:

http://www.htmlhelp.com/feature/art2.htm
http://www.htmlhelp.com/feature/art2a.htm
http://www.htmlhelp.com/feature/art2b.htm
http://www.htmlhelp.com/feature/art2c.htm

Although he focused on non-standard markup, and the post pre-dates the spread of javascript, the same arguments also apply to relying on javascript for functionality.

The WWW is a real puzzle. It's the only part of marketing and sales where people expend extra effort to go out of their way to shrink their potential. By sticking with HTML + CSS for the base, one guarantees the largest potential reach. By designing to a specific subset of technology, that potential reach is reduced.

Then, from the security perspective, there are many exploit chains that start out with getting JS into the browser and end with full root access. Some even reach down into x86-based speculative execution flaws in the CPU to gain root.

mfoley, I'd encourage you to try the CSS list again and get a response one way or another about it being possible or impossible to use clean CSS + HTML for the task, and save JS as a fallback.