Troubleshooting code: JavaScript not functioning properly with CSS

I am attempting to create a vertical header using JavaScript, CSS, and HTML. However, I am facing an issue with the header height not dynamically adjusting. I believe there might be an error in how I am calling JSS.

Code :

 <style>
table, tr, td, th {
  border: 1px solid #000;
  position: relative;
  padding: 10px;
}

th span {
  transform-origin: 0 50%;
  transform: rotate(-90deg); 
  white-space: nowrap; 
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
}
</style>
<Script>
$(function() {
    var header_height = 0;
    $('table th span').each(function() {
    if ($(this).outerWidth() > header_height) header_height =         
    $(this).outerWidth();
    });

    $('table th').height(header_height);
});
</script>
<html onload="function()">
<table>
  <thead>
      <tr>
<th><span>DATE</span></th>
<th><span>ACCOUNTNAME</span></th>
      </tr>
</thead>
<tbody>
<tr>
 <TD class=AltLight align=left height="17" width="10%">2017/10/20</TD>
<TD class=AltLight align=left height="17" width="10%">USA</TD>
</tr>
</tbody>
</table>
</html>

Desired Output

DATE ( Vertically Titled ) Account ( vertically Titled
20/10/2017 USA

javascripthtmlcss

Answer №1

If you're finding that your program is lacking the jQuery library, don't worry – it's an easy fix! You have a couple of options available to you. Firstly, you can download the jQuery file and include it in your project. Alternatively, you can simply link to the library on your page using the following code:

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

In addition, if you'd like to enhance the look of your page with Bootstrap, you can add the following links to your code:

<meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
 </script>

Update : If you're using jQuery in your script tag, ensure that you have the necessary jQuery library as well. This can be achieved in two ways:

  1. You can download the jQuery library file and paste it into the war file of your program, linking it to your script like so:

    <script type="text/javascript" src="(Location_of_folder /filename.js)jquery-1.8.0.min.js"></script>

Adv : Offline Access

  1. Alternatively, you can utilize a CDN such as Google CDN for quick access:

    <script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
</script>

Adv : Gets Cached in browser. With the CDN cached, subsequent visits will load faster, especially for web applications with multiple pages.

Answer №2

give this a go

<style>
th span {
    transform-origin: 0 50%;
    transform: rotate(-90deg); 
    white-space: nowrap; 
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    }
</style>

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<table>
  <thead>
      <tr>
<th><span>DATE</span></th>
<th><span>ACCOUNTNAME</span></th>
      </tr>
</thead>
        <tbody>
            <tr>
                <TD class=AltLight align=left height="17" width="10%">2017/10/20</TD>
                <TD class=AltLight align=left height="17" width="10%">USA</TD>
            </tr>
        </tbody>
    </table>
<Script>
    $(document).ready(function() {
    var header_height = 0;
    $('table th span').each(function() {
    if ($(this).outerWidth() > header_height) header_height =         
    $(this).outerWidth();
    });

    $('table th').height(header_height);
});

</script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Node responds with a 404 error upon receiving the post request

I am facing an issue with my jQuery code. Here is what I have: $.ajax( { type: 'POST', data : mydata, url : '/routerfunction', dataType : 'String', success : function(data) ...

javascriptjquerynode.jsexpress

What is the best way to make multiple HTML tables sortable?

I recently implemented an open-source JavaScript table sorter in my project. You can find more information about it here: However, I encountered an issue where only the most recently added table on my page is sortable. When users press a button, new table ...

javascriptjqueryhtmlajax

The attempt to unserializing the configuration schema in Yii2 was unsuccessful

My brain feels scrambled... I am attempting to insert an image in HTML within Yii2. I retrieve it from the database and place it into the view file, but when I try to display it using HTML tags, an error is thrown. However, the image is being added perf ...

phphtmlyiiyii2

Oops! Vue.js router configuration is throwing an error because it's unable to read properties of undefined when trying to access 'use'

Description: I have been working on a leaderboard web application using Vue.js. When I tried to launch the server on localhost after finishing my code, I encountered an error. The error message I received is as follows: Uncaught runtime errors: ERROR Cann ...

javascriptvue.jserror-handlingvue-routerweb-development-server

Issue encountered while connecting ipcRenderer with ipcMain in an electron application

I recently set up Angular CLI in Electron, and I have a link that triggers a function which communicates between ipcRenderer and ipcMain: Here is the HTML code: <a (click)="check()"> click </a> This is the component code: constructor(privat ...

javascriptnode.jsangularelectronangular-cli

Instructions for creating a table in this specific format

I have some data stored in MySQL and I am looking to display it in a specific format: Data: Name, Image URL, Link I would like to dynamically print it like this: Even though I don't know the user's screen width, I want it to be displayed as w ...

phphtmlmysql

The React Testing Library encountered an error: TypeError - actImplementation function not found

Encountering a TypeError: actImplementation is not a function error while testing out this component import React from 'react'; import { StyledHeaderContainer, StyledTitle } from './styled'; export const Header = () => { return ( ...

javascriptreactjsjestjsreact-testing-library

Adjust the dimensions of the icon

My current project involves creating a sidebar with icons and associated text to represent each icon. However, I encountered an issue while trying to adjust the size of the icons within the sidebar using the "useStyles()" method. For some reason, the size ...

cssreactjsmaterial-ui

Is it possible to create .html files using the provided list of words?

Can we create .html files from a word list? Check out the example shown in the attached image. Thank you! View Image ...

htmltext

Organizing table data by columns in a continuous loop

I'm currently working on extracting data from a database, organizing it into tables (potentially multiple tables), and presenting them in columns of 4 across several pages. My main concern is figuring out how to display the tables horizontally like t ...

phpcsswhile-loop

Retrieve an array of specific column values from an array of objects using Typescript

How can I extract an array from an array of objects? Data var result1 = [ {id:1, name:'Sandra', type:'user', username:'sandra'}, {id:2, name:'John', type:'admin', username:'johnny2'}, ...

javascriptarraysangulartypescript

Is there a way to locate child components without needing to designate the higher-order component encompassing them?

When working with Material-ui, I often find that its extensible nature can be a hindrance when it comes to testing. For example, even if I am using the following code: const MyEventButton = () => (<IconButton /> <Event /> </IconButton ...

javascriptreactjsunit-testingmaterial-uienzyme

Using Jest: A guide to utilizing a mocked class instance

When working on my frontend React application, I decided to use the auth0-js library for authentication purposes. This library provides the WebAuth class which I utilize in my code by creating an instance like so: import { WebAuth } from 'auth0-js&ap ...

javascripttypescripttestingjestjsauth0

Retrieve a JSON file from the local file system using AngularJS

I recently started learning AngularJS and I am trying to read a JSON file from my local system. However, when I attempt to do so, I encounter an exception error that says: "Access to restricted URI denied XMLHttpRequest." Here is the code snippet: var de ...

javascriptangularjsangularjs-directive

Tips on ensuring data cleanliness in jQuery input fields

Before sending the ajax request, I want to sanitize the form fields for added security. Currently, my Javascript code looks like this: jQuery(document).ready(function($) { $('#login-form').submit(function(e) { e.preventDefault(); // pr ...

javascriptjquerysanitization

What is the method for identifying the environment within an Express.js application?

Is there a reliable method for determining the environment in which an expressJS app is currently operating (development, test, production)? I have checked process.env, but found no clear indication of the environment. I know that variables can be set in ...

javascriptnode.jsexpress

What is the best way to add data from an array to a DOM element in the same order it was retrieved from Firebase?

Utilizing Google Firebase Firestore for data storage and the Open Movie Database (OMD) in combination with Axios to retrieve movie information. I am currently developing a website that allows users to add movies to collections. On the collections page, al ...

javascripthtmlcssfirebasegoogle-cloud-firestore

What is the best method for implementing page transitions between components in NextJS?

My goal is to create a form that smoothly slides to the right, similar to the one seen on DigitalOcean's website when you click "Sign up using email" here: . While the transition itself is relatively simple, I noticed that DigitalOcean uses 2 separat ...

javascriptcssuser-interfacenext.js

Exploring the Benefits of Using Gatsby with Material-UI: The Importance of Creating a Page

Upon reviewing the gatsby demo showcased on the material-ui project github page, I found myself puzzled by a few lines of code. In the specific file getPageContext.js export default function getPageContext() { // Ensuring each server-side request has i ...

javascriptnode.jsmaterial-uigatsby

Is it a mistake to gather errors together and send them to the promise resolve in JavaScript?

When processing a list in a loop that runs asynchronously and returns a promise, exiting processing on exception is not desired. Instead, the errors are aggregated and passed to the resolve callback in an outer finally block. I am curious if this approach ...

javascriptes6-promise