LinuxQuestions.org
Download your favorite Linux distribution at LQ ISO.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 03-04-2019, 03:20 PM   #16
mfoley
Senior Member
 
Registered: Oct 2008
Location: Columbus, Ohio USA
Distribution: Slackware
Posts: 1,856

Original Poster
Rep: Reputation: 141Reputation: 141

Quote:
Originally Posted by Turbocapitalist View Post
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.
 
Old 03-06-2019, 11:30 AM   #17
mfoley
Senior Member
 
Registered: Oct 2008
Location: Columbus, Ohio USA
Distribution: Slackware
Posts: 1,856

Original Poster
Rep: Reputation: 141Reputation: 141
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?

Last edited by mfoley; 03-06-2019 at 11:34 AM.
 
Old 03-06-2019, 02:07 PM   #18
mfoley
Senior Member
 
Registered: Oct 2008
Location: Columbus, Ohio USA
Distribution: Slackware
Posts: 1,856

Original Poster
Rep: Reputation: 141Reputation: 141
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>

Last edited by mfoley; 03-06-2019 at 02:21 PM.
 
Old 03-06-2019, 02:14 PM   #19
scasey
LQ Veteran
 
Registered: Feb 2013
Location: Tucson, AZ, USA
Distribution: CentOS 7.8.2003
Posts: 5,384

Rep: Reputation: 2021Reputation: 2021Reputation: 2021Reputation: 2021Reputation: 2021Reputation: 2021Reputation: 2021Reputation: 2021Reputation: 2021Reputation: 2021Reputation: 2021
Quote:
Originally Posted by mfoley View Post
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?
 
Old 03-07-2019, 12:17 AM   #20
Turbocapitalist
LQ Guru
 
Registered: Apr 2005
Distribution: Linux Mint, Devuan, OpenBSD
Posts: 5,511
Blog Entries: 3

Rep: Reputation: 2773Reputation: 2773Reputation: 2773Reputation: 2773Reputation: 2773Reputation: 2773Reputation: 2773Reputation: 2773Reputation: 2773Reputation: 2773Reputation: 2773
Quote:
Originally Posted by scasey View Post
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.

Last edited by Turbocapitalist; 03-07-2019 at 12:20 AM.
 
2 members found this post helpful.
  


Reply

Tags
html, table


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Can't get conky to align correctly BobSwi Slackware 4 07-08-2016 01:34 PM
The teddy bear thead! ButterflyMelissa General 9 07-20-2011 04:35 AM
align columns of strings and explain '\t' (java) dave bean Programming 3 01-10-2004 10:55 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 10:28 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration