adjusting the width of an HTML table cell

I'm struggling with the code below:

<table>
 <thead>
    <th class='1'>Date</th>
    <th class='2'>Start Time</th>
    <th class='3'>End Time </th>
    <th class='4'>Location</th>
</thead>
  <tbody>
    <td class='1'>Date</td>
    <td class='2'>Start Time</td>
    <td class='3'>End Time </td>
    <td class='4'>Location</td>
</tbody>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

and I have the following CSS

 table {width:550px;}
.1 {width:60px; background-color:green;}
.2 {width:90px; background-color:blue;}
.3 {width:90px; background-color:red;}
.4 {width:100px; background-color:yellow;}​

I'm facing an issue where the width isn't being set and the background color is not changing as expected. It seems like there might be a mistake in my code somewhere.

Answer №1

Make sure your class names do not begin with numbers. Consider renaming them to start with a letter (a-z).

Check out the JS Fiddle example: http://jsfiddle.net/sDKp2/

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

Targeting an HTML form to the top frame

Currently, I have a homepage set up with two frames. (Yes, I am aware it's a frame and not an iFrame, but unfortunately, I cannot make any changes to it at this point, so I am in need of a solution for my question.) <frameset rows="130pt,*" frameb ...

Whenever I attempt to update content in my database using an HTML form, I encounter an issue where if I enter a single quote character in the input field, the SQL update operation fails

Whenever I fill out a basic form and include an apostrophe or single quote, the query breaks and the data is not added to my database. How can I prevent this issue? Form Example <form method="POST" action="#"> <table> < ...

Tips for accessing the value of a dynamically created textbox using JavaScript

Hello everyone, I have a couple of questions that I need help with. I am currently working on developing a social networking website similar to Facebook. On this platform, there are multiple posts fetched from a database. However, I am facing an issue w ...

Extract CSS from Chrome developer tools and convert it into a JavaScript object

Recently, we have started incorporating styles into our React components using the makeStyles hook from Material-UI. Instead of traditional CSS, we are now using JavaScript objects to define styles. An example of this is shown below: const useStyles = ma ...

Next.js fails to properly render external links when utilizing the Link component

It was quite surprising to discover that a basic Link component doesn't function as expected in Next.js when attempting to use it with an external URL and HTML Button tag within. Here is my attempt at solving this issue: Attempt 1: <Link href="h ...

How to create a full-width and full-height background image in a div using CSS

When using a bootstrap template, I encountered an issue with adding an image as a background. Here is the CSS code: background:url(../images/banner.png) no-repeat; background-size: 100%; The problem with these CSS rules is that the image gets clipped and ...

What is the best way to add all the items from an array to a div element?

I am currently facing an issue where only the last object in my array is being added to my div using the code below. How can I modify it to add all objects from the array to my div? ajaxHelper.processRequest((response: Array<Vehicle.Vehicle>) ...

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

Can each content within ngView be animated individually upon entering, rather than the entire View (div) itself? ...

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

Show values in an angular template using an array

I want to showcase values of an array using *ngFor const blockData = [ {text: sampleText1, array: [val1]}, {text: sampleText2, array: [val2, dat2]}, {text: sampleText3, array: [val3, dat3]} ] <div *ngFor="let data of blockData"> ...

What is the best method to apply a background image in HTML that functions properly in Internet Explorer?

Having trouble getting this CSS code to work in Internet Explorer. Need a solution that is compatible with IE for setting the background. body { background: url("images/Login-BG.png") no-repeat center center fixed; -moz-background-size: cover; -webkit ...

Identify the location of the mouse and activate a specific function based

Tracking the x-coordinate of the mouse is crucial in this scenario. When the mouse approaches a specific threshold (250px) towards the left edge of the window, it should trigger the function "openNav." The function should close when the mouse moves away fr ...

Notification with jQuery

I am looking to display an alert message when val = -1. However, the issue I am facing is that this message always appears at the bottom of the page regardless of the value of val. if ($val == -1) echo ' <script> $( ...

How do I utilize the Material-UI slider's activated (CSS API) feature to conceal the shadows?

Can someone please explain to me how I can use the activated class to change the style of the thumb and hide its shadows? According to the official website, the activated class is applied to the track and thumb elements to trigger JSS nested styles when a ...

Animating path "d" with ReactJS and SVG upon clicking in FireFox

Visit this CodePen for more: https://codepen.io/sadpandas/pen/xxbpKvz const [currentScreen, setCurrentScreen] = React.useState(0); return ( <React.Fragment> <div> <svg className="theSvg" width="156" height="6 ...

What is the best way to save an integer in HTML's localStorage instead of a string?

I've encountered an issue while using the localStorage feature in a game I'm developing. Specifically, the money variable should be increasing by 1 every second. Here's a snippet of my code: var money = 0; window.onload = function () { ...

Ways to arrange objects to fill up space in a specific sequence

My HTML document contains two child HTML elements within the parent HTML. The parent HTML has a div with a class of .page, which is a large area for the children to occupy. Both children are of the same size and I need them to spawn in a specific order; fo ...

Having trouble with sending a POST request to a URL?

I'm attempting to communicate with an API by including the parameters in the URL. I am uncertain whether it will return XML or JSON, but it will be one of the two. Unfortunately, I keep encountering an error message. Here's an example of my requ ...

Different from SimplyScroll but with added functionalities

Searching for a replacement for the now deprecated SimplyScroll with specific features. I am in need of a continuous, automatic carousel of boxes/images that halts when hovering over with the mouse (a feature SimplyScroll possesses), and allows movement ...

Elegant Border Separator

I'm attempting to achieve the design below (with a 1 pixel gap on each end): ...