The HTML table is not displaying properly due to colspan being used incorrectly

A table has been created with all headers having colspan=2 and some body cells having colspan=N.

In certain instances, the display is not rendering correctly:

https://i.sstatic.net/xARV6.png

td, th {
  border: solid #aaa 1px
}
<table>
  <thead>
    <tr>
      <th colspan="2" scope="col">8 AM</th>
      <th colspan="2" scope="col">9 AM</th>
      <th colspan="2" scope="col">10 AM</th>
      <th colspan="2" scope="col">11 AM</th>
    </tr>
  </thead>
  <tbody>
    <tr>

      <td colspan="5"><span>-</span></td>

      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>

    </tr>
  </tbody>
</table>

The issue lies in the "-" cell, which should align with the center of the "10 AM" column but does not do so.

What could be causing this discrepancy?

Answer №1

I believe you may be looking for something along these lines!

<tbody>
    <tr>
      <td colspan="4"><span>-</span></td>
      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>
      <td><a href="#">+</a></td>
    </tr>
  </tbody>

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

What might be the reason behind Chrome occasionally not updating the page when I resize the browser window?

Currently, I am in the process of developing a responsive design site prototype. Everything is going smoothly except for one peculiar issue that only seems to occur in Chrome. Sometimes, when expanding the window, the browser appears to get stuck between s ...

Please fill out and submit a form by clicking on a button in HTML

I am currently developing a software program that needs to automatically submit a form on a webpage by "clicking" on a button: <button class="form" type="submit">Send</button> Based on my limited knowledge, I understand that in order to submi ...

Scaling boxes responsively according to screen size utilizing Bootstrap

Creating a portfolio website with a carousel section to display completed projects in a 2x2 grid layout, transitioning to a 1x4 on smaller screens is proving to be quite challenging. After trying various methods from Bootstrap documentation and YouTube tut ...

Using canvas transformation changes the way drawImage is applied

I have been working on a game as a hobby and you can find it at . I have managed to get most aspects of the game working well, such as transformation, selection, movement, and objects. However, there is one particular challenge that I am struggling with. ...

Instructions for including a script and stylesheet exclusively on a single page of a website

I need to incorporate these two lines onto a single page of my website: <script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script> As well as <link href="//cdnjs.cloudflare.com/ajax/libs/OwlCa ...

What is the reasoning behind jQuery UI employing CSS classes as opposed to pseudo-classes?

In this detailed explanation found on this website, it is discussed why jQuery UI uses CSS classes like .ui-state-active that are applied through JavaScript, rather than utilizing existing CSS pseudo-classes like :active. What is the reasoning behind thi ...

Styling nested lists with CSS

Looking to implement CSS to style a nested list like the one below: 1. item1 subitem subitem 2. item2 subitem subitem I am trying to customize the appearance of the numbers (either in bold or red color). Despite searching online, the solutio ...

Scroll upwards within a nested div

Is there a way to smoothly animate the content of the inner div upward without requiring any button clicks? Also, is there a method to trigger an event once the animation has completed? ...

Chrome: Box-shadow not visible on images with a background present

Recently, I have noticed an issue with the box-shadow not displaying on images with a background on my website. This problem started occurring in Chrome a few months ago, despite working perfectly fine around six months ago. To pinpoint the problem, I cre ...

How to modify checkbox and textarea values in a MySQL database with Jquery

In my MySQL database, I have a textarea and three checkboxes. By default, the textarea value is null and the checkbox values are set to zero (0). When I enter text into the textarea, I am able to update the text value in my database. However, I am facing ...

Creating a dropdown menu that seamlessly populates elements without any empty spaces

My team at the company is using a menu created by another developer. I recently added a dropdown selection to the first item on the menu, but I've run into an issue where the dropdown box does not fully fill the item, and I can't seem to fix it. ...

Highslide's Page Z-Index Elevation

Hey there, I'm currently facing an issue with the z-index positioning of an in-page gallery on my website. I attempted to use the hs.zIndexCounter attribute but unfortunately, it didn't solve the problem. Just so you know, my navigation bar has ...

Eliminate excess space around images in Bootstrap

I have an image tag with a padding applied to it. I am using the Bootstrap CSS framework. Currently, there is a white background behind the image that I want to remove and make it partially transparent instead. The image is in PNG format, so I suspect the ...

The registration page in PHP is malfunctioning, and the reason remains a mystery to me

Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...

Simple HTML/CSS text blocks positioned beside images in a list format

I'm attempting to design a list (ul) where each li has an img on the left and text aligned to the left (including a title and paragraphs) positioned next to the image on the right. I've experimented with float: left and various display propertie ...

Integrating information from various sources to create a cohesive online platform

I am looking to incorporate data from various sources into a single web page: Social networks (Facebook, Twitter, LinkedIn, etc.) RSS feeds Article meta tags (particularly OpenGraph and Twitter cards) This data may change dynamically based on user inter ...

Implement various actions when the window is resized

The carousel code I have found returns a different number of items to display based on screen size. You can check it out here. $(function() { var mini = 1000; var big = 1280; if (window.screen.availWidth < mini) { $('#carousel1').jsCar ...

Attempting to modify background by manipulating the state in Reactjs

I'm currently working on an app that features various games. My goal is to allow users to click a button and have the game display on the screen, with the background color changing as well. I aim to utilize state to control the overall background of t ...

Maximizing Screen Size for Videos on Internet Explorer: A Step-by-Step Guide

How can I make the video background fit properly on all browsers, including IE, without zooming it? Here is my website link: The CSS property object-fit: cover works for most browsers, but unfortunately IE does not support this property. I would apprecia ...

Utilize the float left and float right properties within a div container with a width of 100% to ensure compatibility

I need to align two divs within a container-div in IE7. The first div should float to the left, and the second to the right. Currently, both divs are floating to the left according to my CSS configuration. Here is the CSS code I'm using: .container ...