Eclipse Generic Text Editor Keeps Updating Outline and Really Slow

I use the generic text editor for javascript editing. I would have hundreds of javascript files and whenever I am editing in those files and only those files, the experience is excruciating. The outline will update after each character is typed or deleted creating a pause of 3 or 4 seconds, on each and every typed character.
If I could turn off the outline I would, even though it is a useful tool.
Does anybody know how to either

  1. Turn off the outline
  2. Stop the outline updating
  3. Know a better js editor to use in Eclipse (the old JDT tools were better but it is a very laborious process to downgrade to them each time I update Eclipse)

At the moment I am using VSCode to edit my js files and Eclipse for everything else.

Add class to header when some div touch the top of browser

I’m trying to change a class of header when some element touch top of page. If div is background white to add header class black, so text will be visible. This code only works one time even if multi .header-hover is on page. .header-hover add class black, .remove-header remove class black and then next .header-hover do nothing.

   $(document).ready(function(){
        $(window).on("scroll", function() {
            $('.header-hover').each(function(){
                var offset = $(this).offset().top - $(window).scrollTop();
                if (offset <= 0) {
                    $("header").addClass("black");
                }
            })
        });
        $(window).on("scroll", function() {
            $('.remove-header').each(function(){
                var offset = $(this).offset().top - $(window).scrollTop();
                if (offset <= 0) {
                    $("header").removeClass("black");
                }
            })
        });
    });

variable not defined in developer tools console

I have been using the console to examine variables but it has stopped working for me and I do not know why.

To illustrate the problem I have the following files which run locally on Apache so I access it at localhost/path/to/index.html.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module" src="./javascript/main.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>...</h1>
</body>
</html>
main.js:

console.log("from main.js");
let sillyName = { number: 7 };

In Firefox and Chrome developer tools console if I start typing “sillyName” I would expect it to autocomplete to “sillyName” and show the value of that variable but I get an error as seen in this screenshot:

Firefox console showing the error

Obviously I am doing something differently to what I normally do but I can not work out what. Any help would be appreciated.

React router: sidebar component re-rendering

I am developing a React application using react-router-dom v6.27.

The application has a logon and register route as well as a default route that renders an Application component. The Application component includes a NavBar and a TopBar as well as an Outlet for all of the sub-routes defined beneath Application.

When navigating between various paths within the application which are all sub-routes of the default path, I am noticing the NavBar is re-rendering on each navigation, causing a loss of state, which in my case is the “collapsed” state of the NavBar. How can I restructure my routes such that the NavBar is not re-rendering on each navigation causing it to lose state?

function App() {

const [theme, colorMode] = useMode();
const { QueryFeedback, queryClient } = useFeedbackQuery();

const Application = () => {
    return (
        <AuthenticatedView>
            <div className="app">
                <NavBar />
                <div className="content">
                    <Topbar />
                    <main className="view">
                        <Outlet />
                    </main>
                </div>
                <QueryFeedback />
            </div>
        </AuthenticatedView>
    );
}

return (
    <QueryClientProvider client={queryClient}>
        <ColorModeContext.Provider value={colorMode}>
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <Routes>
                    <Route path="/" element={<Application />}>
                        <Route index element={<Dashboard />} />
                        <Route path="courses" element={<Courses />} />

                        <Route path="course/:id" element={<CourseView />}>
                            <Route path="" element={<CourseDetail />} />
                            <Route path=":moduleid" element={<ModuleDetail />} />
                        </Route>

                        <Route path="announcements" element={<Announcements />} />
                        <Route path="calendar" element={<Calendar />} />

                        <Route path="*" element={<NotFound />} />
                    </Route>
                    <Route path="login" element={<Login />} />
                    <Route path="register" element={<Register />} />
                </Routes>
            </ThemeProvider>
        </ColorModeContext.Provider>
    </QueryClientProvider>
);

}

Returning undefined when asking to console.log (codecademy – Javascript – Build a Library)

I am just playing around now after finishing the project since.

I set up and entire string with the media type, the title, run time/pages,
author/director/artist, what it is rated, and whether it is checked out or available for when I call printString().

I am running into an undefined at the end and the printString at the beginning.

can anyone help me fix this code?

Returning:

Output-only Terminal
Output:
Dr. Jekyll and Mr. Hyde is avalible. Speek to an associate for assistance finding this Book.
Dr. Jekyll and Mr. Hyde, written by Robert Louis Stevenson, Vladimir Nabokov (Introduction), Dan Chaon (Afterword), is 139 pages. Dr. Jekyll and Mr. Hyde is rated 3 stars by readers. undefined
Grave is avalible. Speek to an associate for assistance finding this CD.
Grave, by Endless Procession Of Souls, has 10 songs. The songs on this album are Dystopia, Amongst Marble and the Dead, Disembodied Steps, Flesh Epistle, Passion of the Weak, Winds of Chains, Encountering the Divine, Perimortem. Plague of Nations, Plague of Nations, Epos.
Grave is rated 4 stars by listeners. undefined
Marley & Me is checked out. Talk to an associate to get on a wait list for this Movie.
Marley & Me, directed by David Frankel, staring , has a 115 minute run time. Marley & Me is rated 4 stars by watchers. undefined

//parent class

class Media {
  constructor(title) {
    this._title = title;
    this._isCheckedOut = false;
    this._ratings = [];
  }

  get title() {
    return this._title;
  }

  get isCheckedOut() {
    return this._isCheckedOut;
  }

  get ratings() {
    return this._ratings;
  }

  toggleCheckOutStatus() {
    this._isCheckedOut = !this.isCheckedOut;
  }

  getAverageRating() {
    if (this.ratings.length === 0) {
      return 0;
    }
    const sum = this.ratings.reduce((acc, val) => acc + val, 0);
    return Math.round(sum / this.ratings.length);
  }

  addRating(rating) {
    if (rating >= 1 && rating <= 5) {
      this.ratings.push(rating);
    } else {
      console.error(
        `Sorry, the Rating for ${this.title} must be between 1 and 5.`
      );
    }
  }

  set isCheckedOut(checkedIn) {
    this._isCheckedOut = checkedIn;
  }

  printString() {
    if (this.isCheckedOut) {
      console.log(
        `${this.title} is checked out. Talk to an associate to get on a wait list for this ${this.constructor.name}.`
      );
    } else {
      console.log(
        `${this.title} is avalible. Speek to an associate for assistance finding this ${this.constructor.name}.`
      );
    }
  }

  info() {
    if (this instanceof Book)
      console.log(
        `${this.title}, written by ${this.author}, is ${this.pages} pages. ${
          this.title
        } is rated ${this.getAverageRating()} stars by readers. ` +
          this.printString()
      );
    else if (this instanceof Movie)
      console.log(
        `${this.title}, directed by ${this.director}, staring ${
          this.cast
        }, has a ${this.runTime} minute run time.       ${
          this.title
        } is rated ${this.getAverageRating()} stars by watchers. ` +
          this.printString()
      );
    else if (this instanceof CD)
      console.log(
        `${this.title}, by ${this.artist}, has ${
          this.songs
        } songs. The songs on this album are ${this.songTitles}.
      ${this.title} is rated ${this.getAverageRating()} stars by listeners. ` +
          this.printString()
      );
    else
      console.log(
        `This title is not avalibe a this location. Please ask an associate for assisance.`
      );
  }
}

//child classes

class Book extends Media {
  constructor(title, author, pages) {
    super(title);
    this._author = author;
    this._pages = pages;
  }
  get author() {
    return this._author;
  }
  get pages() {
    return this._pages;
  }
}

class Movie extends Media {
  constructor(title, director, runTime, cast) {
    super(title);
    this._director = director;
    this._runTime = runTime;
    this._cast = [];
  }
  get director() {
    return this._director;
  }
  get runTime() {
    return this._runTime;
  }
  get cast() {
    return this._cast;
  }
}

class CD extends Media {
  constructor(title, artist, songs, songTitles) {
    super(title);
    this._artist = artist;
    this._songs = songs;
    this._songTitles = songTitles;
  }
  get artist() {
    return this._artist;
  }
  get songs() {
    return this._songs;
  }
  get songTitles() {
    return this._songTitles;
  }
}

//method for information pull

//instances

const historyOfEverything = new Book(
  "A Short History of Nearly Everything",
  "Bill Bryson",
  544
);

const theGreatGatsby = new Book("F. Scott Fitzgerald", "The Great Gatsby", 180);

const jekyllAndHyde = new Book(
  "Dr. Jekyll and Mr. Hyde",
  "Robert Louis Stevenson, Vladimir Nabokov (Introduction), Dan Chaon (Afterword)",
  139
);

const sherlockHolmes = new Book(
  "The Complete Sherlock Holmes",
  "Arthur Conan Doyle",
  1796
);

const speed = new Movie(
  "Speed",
  "Jan de Bont",
  116,
  "Keanu Reeves, Dennis Hopper, Sandra Bullock, Joe Morton, Jeff Daniels"
);

const snowWhite = new Movie(
  "Snow White and the Seven Dwarfs",
  "David Hand",
  79,
  "Adriana Caselotti, Harry Stockwell, Lucille LaVerne, Moroni Olsen, Billy Gilbert, Billy Gilbert, Pinto Colvig, Otis Harlan, Scotty Mattraw, Roy Atwell"
);

const theEdge = new Movie(
  "The Edge",
  "Lee Tamahori",
  212,
  "Anthony Hopkins, Alec Baldwin, Elle Macpherson, Harold Perrineau"
);

const marley = new Movie(
  "Marley & Me",
  "David Frankel",
  115,
  "Owen Wilson, Jennifer Aniston"
);

const endlessProcessionOfSouls = new CD(
  "Grave",
  "Endless Procession Of Souls",
  10,
  "Dystopia, Amongst Marble and the Dead, Disembodied Steps, Flesh Epistle, Passion of the Weak, Winds of Chains, Encountering the Divine, Perimortem. Plague of Nations, Plague of Nations, Epos"
);

const comeGetIt = new CD(
  "Rick James",
  "Come Get It!",
  9,
  "Stone City Band, Hi!, You And I, Sexy Lady, Dream Maker, Be My Lady, Mary Jane, Hollywood, Stone City Band, Bye!, You And I - Extended M+M Mix"
);

const aTribeCalledRed = new CD(
  "The Halluci Nation",
  "A Tribe Called Red",
  9,
  "Electric Pow Wow Drum, Look at This - Remix, Northern Cree - Red Skin Girl - A Tribe Called Red Remix, Woodcarver, Good to Go, Munchi - Shottas - A Tribe Called Red Socacore Remix, Native Puppy Love, Moombahwow, Intertribal N.1"
);

const bachImprovisations = new CD(
  "Ira Stein",
  "Bach Improvisations",
  9,
  "Cantata No. 122, Cantata No. 11, Cantata No. 31, Christmas Oratorio , Choral for 4 voices (Liebster jesu), Choral for 4 voices (O Mensch), Chorale for 4 voices Wir glauben all en einen Gott), Jesu, Chorale for 4 voices (Komm)"
);

historyOfEverything.toggleCheckOutStatus();
theGreatGatsby.toggleCheckOutStatus();

historyOfEverything.addRating(5);
historyOfEverything.addRating(3);
historyOfEverything.addRating(5);

theGreatGatsby.addRating(4);
theGreatGatsby.addRating(3);
theGreatGatsby.addRating(4);
theGreatGatsby.addRating(2);
theGreatGatsby.addRating(4);

jekyllAndHyde.addRating(5);
jekyllAndHyde.addRating(4);
jekyllAndHyde.addRating(4);
jekyllAndHyde.addRating(5);
jekyllAndHyde.addRating(1);
jekyllAndHyde.addRating(5);
jekyllAndHyde.addRating(3);
jekyllAndHyde.addRating(1);
jekyllAndHyde.addRating(2);
jekyllAndHyde.addRating(4);

sherlockHolmes.addRating(1);
sherlockHolmes.addRating(5);
sherlockHolmes.addRating(5);
sherlockHolmes.addRating(5);

speed.toggleCheckOutStatus();
snowWhite.toggleCheckOutStatus();
marley.toggleCheckOutStatus();

speed.addRating(1);
speed.addRating(1);
speed.addRating(5);

snowWhite.addRating(5);
snowWhite.addRating(3);
snowWhite.addRating(5);
snowWhite.addRating(4);

theEdge.addRating(5);
theEdge.addRating(1);
theEdge.addRating(2);
theEdge.addRating(4);
theEdge.addRating(4);

marley.addRating(5);
marley.addRating(5);
marley.addRating(5);
marley.addRating(5);
marley.addRating(5);
marley.addRating(4);
marley.addRating(4);
marley.addRating(1);

endlessProcessionOfSouls.addRating(5);
endlessProcessionOfSouls.addRating(4);
endlessProcessionOfSouls.addRating(2);
endlessProcessionOfSouls.addRating(4);
endlessProcessionOfSouls.addRating(4);

comeGetIt.addRating(5);
comeGetIt.addRating(4);
comeGetIt.addRating(3);
comeGetIt.addRating(5);
comeGetIt.addRating(4);

aTribeCalledRed.addRating(2);
aTribeCalledRed.addRating(4);
aTribeCalledRed.addRating(4);
aTribeCalledRed.addRating(3);

bachImprovisations.addRating(5);
bachImprovisations.addRating(4);
bachImprovisations.addRating(3);
bachImprovisations.addRating(3);
bachImprovisations.addRating(2);

jekyllAndHyde.info();
endlessProcessionOfSouls.info();
marley.info();

How to configure `appscript.json` for a Google Sheets Editor Add-On?

I’ve been trying to submit a google sheets editor add on to the google workspace marketplace for the last few weeks, and have been stymied by feedback from the review team that my app is configured as a “Workspace Add-On” while it has the behavior of an “Editor Add-On”. Note that it is supposed to be the latter, and I can’t, for the life of me, figure out why its being classified as the prior. My best guess is that it is due to my appscript.json configuration, but maybe I’m mistaken and it’s something else.

If it is the appscript.json file, could anyone guide me towards how that is supposed to look for a sheets editor add-on? Current file below:

{
  "timeZone": "America/Los_Angeles",
  "dependencies": {},
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "oauthScopes": [
    "https://www.googleapis.com/auth/spreadsheets.currentonly",
    "https://www.googleapis.com/auth/script.external_request",
    "https://www.googleapis.com/auth/script.container.ui"
  ],
  "urlFetchWhitelist": [
     "https://example.com"
  ]
}

Support on Memory card game

Hi I have a project to do at my collage and I need support.
I need to make the memory card game.
Project:
At the beginning of the game, the user will be presented with a form in which the user will enter his name and the number of cards he wants to have in the game (30 pairs of cards maximum). Accordingly, the game will start, displaying the player’s name, a clock that will run and count how long until the player finishes the game, and the game itself – that is, the number of pairs of cards according to what the user entered.

Every time the player finds a pair of identical cards, they remain visible, and the game continues until the player has managed to reveal all the pairs.

At the end of the game, the user must be shown how long the game took him and the option to play again.

The game must be built responsively. That is, the larger the screen width, the more cards should be displayed in a row, and the smaller the screen, the fewer cards should be displayed in a row (but more rows).

The game must be designed in a reasonable way.

Javascript can be used (regular)

my issues: please help me about it

  • IDK how to the the value of player name to Game.html
    -IDK how to stop the timer when the game finish
  • IDk how to show the result of the game when you won.
  • IDK how to sync the number of cards to the game, (display) for example you choose 8 cards so it still showing me 30 cards
    also i tried to change to 2 cards but its show me 2 different cards means you can never win the game…

If need I will send the code here

Why properties initializing don’t propagate to child class in ECMASCRIPT?

I’m having some trouble wrapping my head around inheritance in ES6 classes. Searching here, most of the answers are 10+ years old so I don’t think they apply still. Let’s start with the sample code:

class BaseClass {
    baseUnitializedProp;
    baseInitializedProp = 'abc';
    constructor(properties) {
        Object.assign(this, properties);
        console.log('--- BaseClass Constructor ---');
        console.log(this);
        return this;
    }    
}
    
class ClassWithProp extends BaseClass {
    childUnitializedProp;
    childInitializedProp = 1;
}
    
class ClassWithOwnAssign extends ClassWithProp {
    constructor(properties) {
        const instance = super();
        Object.assign(this, properties);
        return instance;
    }    
}
    
const initedObj = new ClassWithProp({
    childInitializedProp: 20, 
    childUnitializedProp: 10, 
    baseUnitializedProp: 15
});
    
console.log('--- Post initialization ---');
console.log(initedObj);
    
const assignedObj = new ClassWithOwnAssign({
    childInitializedProp: 20, 
    childUnitializedProp: 10, 
    baseUnitializedProp: 15
});
console.log('--- Post initialization ---');
console.log(assignedObj);

My question is, why don’t the child properties assignment propagate? From the console.log inside the constructor you see that the properties were assigned, but outside the same properties end up with the declared initial value (or undefined).

Is it possible for puppeteer to take a screenshot without focusing the window? (On windows)

I have a script which makes multiple browsers, and uploads the screenshots at a fixed rate to some API, however when it takes a photo it brings the page to focus. However, I need to occasionally manually go on one of the pages, so the other pages taking screenshots is stealing the focus. Is there a way of preventing puppeteer from stealing the focus?

Here is my test code:

const puppeteer = require("puppeteer-extra");

async function test() {
  const browser = await puppeteer.launch({ headless: false });

  const tasks = Array.from({ length: 5 }).map(async () => {
    const context = await browser.createBrowserContext();
    const page = await context.newPage();
    await page.goto("https://example.com/", { waitUntil: "domcontentloaded" });
    while (true) {
      await page.screenshot({ path: "screenshot.png" });
      await new Promise((r) => setTimeout(r, 2000));
    }
  });
  await Promise.all(tasks);
  await browser.close();
  console.log("all done");
}

test();

I could just put the const browser = await puppeteer.launch({ headless: false }); function inside the array loop, however the actual library I am using is puppeteer-with-fingerprints which doesnt let you launch as many instances as easily

Receveing and using cookies in typescript/javascript/html

So im trying to use token for account autentication, so i receive the token from the backend using cookie-parser like this:

const token = await ViewToken(AccEmail, AccPassword);
res.statusCode = 200;
res.cookie("authToken", token, {httpOnly: false,}).send();

And i receive it succefully in my Login page and after it confirms the login, it redirects the user to another html page, but when i try to use the token cookie from the first page, i isnt there, How do i use cookies received in one html page in another separate html page?

im using this to fetch the cookie:

const resToken = await fetch("http://100.93.233.91:3000/GetToken", {
method: "GET",
headers: h,
credentials: "include",
});
if(resLogin.ok && resToken.ok){
const token = await resToken.json();
localStorage.setItem("authtoken", token);
console.log(localStorage.getItem("authtoken"));
window.location.href = "MainPage.html";
}

but when i console.log(localStorage.getItem(“authtoken”)); it apears as void

Receveing a cookie in one page and acessing its content in another page

Search and Replace all case insensitive feature in Typescript

I am working on a find and replace feature where all instances of a search phrase will be replaced by the replacement text. E.g.

Example 1:
str = "This is a $1000 string $100000"
search = "$1000" 
replacement = "1 thousand"
result = "This is a 1 thousand string 1 thousand00"

str = "This is a Case insensitive example"
search = "case" 
replacement = "Base"
result = "This is a Base insensitive example"

This is what I have so far.

let searchText = "$1000"
let text = "This is $1000 text"
// Create a regex pattern for the search text
let pattern = new RegExp(search_text, "gi");
// Replace the search text with the replacement text
let finalText = text.replace(pattern, "1 thousand");

What I get instead is “This is $1000 text” nothing changes.

How do people usually protect data in the endpoint api of a node express backend?

I am new to web development and I can’t find info on how this works, maybe I am just confused with the given information:
I built a full stack vite express website that is fully functional however I don’t understand how I am supposed to protect the endpoint API.
The problem I am facing is that right now when any web user types https://www.example.com/api/user they can access all my users’ data and even modify the database via postman for example.

I did try to fix this through CORS like this:

const express = require("express");

const app = express();

const cors = require("cors");
const corsOptions = {
  origin: (origin, callback) => {
    if (origin === "http://www.example.com" || process.env.CLIENT_URL) {
      callback(null, true);
    } else {
      callback(new Error("Not allowed by CORS"));
    }
  },
  methods: "GET,POST,PUT,DELETE",
  credentials: true,
};

app.use(cors(corsOptions));

But this either blocks any user fetch or none at all, I would like the computer from the server I am renting to have a special authorization if this makes sense and block anyone else from the endpoint API.

Pass argument to npm scripts with pnpm

I have this setup with npm and webpack

    "start:env": "npm-run-all copy lint "webpack:dev -- --config webpack/{1}.config.js" --",

I’m calling this like so

╰─ npm run start:env uat-local                                                                                                                                                  

Here’s my vite and pnpm setup

    "start:env": "vite dev --config build-config/{1}.config.js",

I’m trying to call this like so

╰─ pnpm run start:env uat-local                                                                                                                                                  

The problem is that script does not read {1} from the terminal

vite –config build-config/${1}.config.js “uat-local”

✘ [ERROR] Could not resolve “/home/alex/work/…/build-config/.config.js”

Conditional CSS to change column widths according to table header value type

I work with a survey engine and when creating surveys, I often have to create grid type questions, which are question types where there are several elements (rows) to evaluate on a scale (columns). The scale can be numerical (ex. 0 through 10), or an all-labelled smaller scale (ex. “Not at all satisfied”, “Unsatisfied”, “Neutral”, “Satisfied”, “Very satisfied”). Sometimes, additional columns can be added for options like “Don’t know”, “Not applicable” or “Prefer not to answer”.

The survey engine doesn’t prioritize the column widths the way I would like it. It prioritizes the scale columns and reduces the first column that contains the question elements. This is unwanted as when you have question elements with quite a bit of wording, you can end up with just a few words per line (text wrap) and it makes the elements hard to read. Fortunately, the software allows me to add my own CSS and Javascript (applied to the entire survey). I am able to fix the column prioritization quite easily and put fix column widths for the scale columns.

However, the problem is that for questions with a numerical scale, I’d like a certain column width (smaller because there can be 10-13 columns), whereas with labelled scales, another column width (larger because there are fewer columns and the scale labels require more space than numbers). The survey engine creates all the HTML that is output on the respondents’ screens, therefore I cannot add attributes such as id’s, names, classes, etc. to the HTML tags. I can add HTML wherever I can put text, I have a place in the project settings for additional CSS (I can overwrite existing engine CSS as well), and a place to add Javascript. Seeing as all these are applied survey-wide, I need something to be able to distinguish the two different types of scales so that the column width’s are either smaller for numerical scales or larger for labelled scales.

Below is a simplified (but accurate) recreation of the tables the engine creates for grid questions. The “R#” values are simply placeholders for the radio/check buttons. In in tags, the engine automatically adds a around anything I put in the header. In the first table below, I also added by own ‘s to have the extremes of the numerical scale labelled to overlap other cells. The second table represents a labelled scale grid.

<table>
  <colgroup><col><col><col><col><col><col><col><col><col><col></colgroup>
  <tbody>
    <tr>
      <th></th>
      <th><div><div>Not at all satisfied</div><div>1</div></div></th>
      <th><div>2</div></th>
      <th><div>3</div></th>
      <th><div>4</div></th>
      <th><div>5</div></th>
      <th><div>6</div></th>
      <th><div>7</div></th>
      <th><div>8</div></th>
      <th><div>9</div></th>
      <th><div><div>Very satisfied</div><div>10</div></div></th>
      <th><div>I don't know</div></th>
      <th><div>I don't want to answer</div></th>
    </tr>
    <tr>
      <th><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet id nisl sed gravida. Sed ipsum tellus</div></th>
      <td>R1</td>
      <td>R2</td>
      <td>R3</td>
      <td>R4</td>
      <td>R5</td>
      <td>R6</td>
      <td>R7</td>
      <td>R8</td>
      <td>R9</td>
      <td>R10</td>
      <td>RD</td>
      <td>RN</td>
    </tr></tbody></table>
<table>
  <colgroup><col><col><col><col><col><col><col></colgroup>
  <tbody>
    <tr>
      <th></th>
      <th><div>Not at all satisfied</div></th>
      <th><div>Unsatisfied</div></th>
      <th><div>Neutral</div></th>
      <th><div>Satisfied</div></th>
      <th><div>Very satisfied</div></th>
      <th><div>I don't know</div></th>
      <th><div>I don't want to answer</div></th>
    </tr>
    <tr>
      <th><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet id nisl sed gravida. Sed ipsum tellus</div></th>
      <td>R1</td>
      <td>R2</td>
      <td>R3</td>
      <td>R4</td>
      <td>R5</td>
      <td>RD</td>
      <td>RN</td>
    </tr></tbody></table>

The following is the CSS that I made which works perfectly for numerical scales (tested) but isn’t very practical for labelled scales. I could make CSS for labelled scales but wouldn’t have the desired outcome for numerical scales.

table {
  table-layout: fixed;
}

table tr:first-child th {
  vertical-align: bottom !important;
}

th:nth-child(1) { width: auto; }
th:nth-child(n+2) {
  width: 36px;
}

table tr:first-child th:nth-child(2) div div:first-child {
  width: 36px;
  white-space: nowrap;
  overflow: visible;
  font-weight: normal;
}

table tr:first-child th:last-child div div:first-child {
  width: 36px;
  direction: rtl;
  white-space: nowrap;
  overflow: visible;
  font-weight: normal;
}

table tr:first-child th:nth-last-child(2) div div:first-child {
  width: 36px;
  direction: rtl;
  white-space: nowrap;
  overflow: visible;
  font-weight: normal;
}

table tr:first-child th:nth-last-child(3) div div:first-child {
  width: 36px;
  direction: rtl;
  white-space: nowrap;
  overflow: visible;
  font-weight: normal;
} 

Is there a way to have CSS (or CSS+JS) that would detect if the scale is numerical (or if the scale has 10 or more columns could work as a detection method as well, though detecting numerical values would be more fool proof in my opinion) and apply different column widths?