Eliminating hidden boundaries in a table by using CSS styling

I currently have a div container with a table embedded within.

HTML:

<div id='ribbon'><table id='topMenu'>
<tr>
<td><a href='index.php'>Home</a></td>
<td><a href='links.php'>Links</a></td>
<td><a href='about.php'>About</a></td>
</tr>
</table></div>


CSS:

#ribbon {
    height: 40px;
    background-color: #C2F4FF;
    font-size: 11pt;
    line-height: 40px;
    padding: 0 0 5px 20px; }

a { text-decoration: none; }

#topMenu { height: 20px; }

#topMenu td { padding: 0 10px 0 10px; }

#topMenu td:hover { background-color: red; }


Displayed is a full-height screenshot of the div with the cursor over "Home":


I suspect that the invisible borders of the table are causing gaps between the red area and the top and bottom of the div. I am looking for ways to expand the td element to full 100% height to eliminate these gaps, allowing the red cell to fill the entire height of the div.

htmlcss

Answer №1

Below are the CSS styles you need to add:

#topMenu{
    border-spacing:0;
    border-collapse:collapse;
}

Check out this JSFiddle for a live example.

It's recommended not to use a table for non-tabular data. Take a look at M1K1O's answer for more information. Table's have their uses, but using them for non-tabular data is not ideal.

Answer №2

Consider using <ul> <li> instead of <table>:

<div id='ribbon'>
    <ul id='topMenu'>
        <li><a href='index.php'>Home</a></li>
        <li><a href='links.php'>Links</a></li>
        <li><a href='about.php'>About</a></li>
    </ul>
</div>

styling

#ribbon {
    background-color: #C2F4FF;
    font-size: 11pt;
    line-height: 40px;
    padding: 0 0 5px 20px;
}
a {
    text-decoration: none;
}
#topMenu {
    height: 20px;
    margin:0 padding: 0;
}
#topMenu li {
    padding: 0 10px 0 10px;
    float:left;
    list-style-type:none;
}
#topMenu li:hover {
    background-color: red;
}

http://jsfiddle.net/d4eqq/

Answer №3

Consider implementing the border-collapse and border-spacing properties for better styling.

Answer №4

One way to eliminate the space is by using the CSS property border-spacing: 0;

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

Header becomes distorted while scrolling down, then returns to normal when scrolling back up

Something strange is happening on my client's website. Whenever I scroll down and then back up, the header displays a large white area where the address/contact bar should be. You can see it in action on the site: rijschool-wolvega.nl I'm not w ...

htmlcss

What could be causing my getAsFile() method to return null?

Below is the code I have been working on: document.getElementById("Image_Panel").addEventListener('paste', (event) => { console.log("Initiating image paste - Step 1"); const clipboardData = event.clipboardData; // Checking ...

javascripthtmlcssimage

js TouchEvent: When performing a pinch gesture with two fingers and lifting one of them up, how can you determine which finger was lifted?

I am currently working on a challenging touching gesture and have encountered the following issue: let cachedStartTouches: TouchList; let cachedMoveTouches: TouchList; function onStart(ev: TouchEvent) { // length equals 2 when two fingers pinch start ...

javascripthtmltypescriptdomtouch

Implementing an active class to an element based on the current URL using Jquery in Django

Is there a way to dynamically add an "active" class to an element based on the href? This is what my template in Django looks like: <div class="panel side-panel-1 category"> <h4 class="title1">Sections</h4> <ul class="clear-list"> ...

jquerycssdjango

The positioning of the second wrapper in absolute does not match the behavior of the first wrapper

Working with CSS can be tricky, especially when dealing with nested navigation elements. I am facing an issue where the styles that work perfectly for one dropdown menu do not function as expected for subsequent nested navigations. My objective is to disp ...

htmlcssbootstrap-4

Encountering yet another frustrating issue with z-index not functioning properly in versions of IE above 7, despite extensive research yielding no solution

I have scoured numerous resources and read countless articles on how to resolve z-index issues in IE 7, 8, and 9. However, none of the suggested solutions seem to work for my particular situation. The issue at hand is that I have interactive content posit ...

javascripthtmlcssinternet-explorerz-index

how to handle form submission using JavaScript's return method

As a developer, I have created a single page that fetches data from a registration page. On this page, each data row has an "add" and "unfriend" button, with the latter initially disabled. When a user clicks the "add" button, a prompt box appears asking ...

javascriptphphtmlforms

Analyzing the current time against a user-inputted time using Javascript

Looking at this html and javascript code, the goal is to compare an input time with the current time. If the input time is less than 2 hours, "Less time" should be displayed in the label; if it's more than 2 hours, then "sufficient time" should appear ...

javascripthtmlfunctiontimecompare

Unable to pinpoint the source of the excess spacing within a form field

There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you. HTML: <div id="co ...

htmlcss

Is there a way to showcase English and CJK text vertically with CSS?

This particular issue was first discussed 14 years ago on Stack Overflow, but a definitive solution still remains elusive. My goal is to have both CJK and Latin characters displayed vertically, with their bottoms facing the right side. While writing-mode ...

htmlcsscross-browserlocalecjk

Left-aligned collapsible navigation menu built with Bootstrap

Looking for a unique template or code snippet to implement the same menu as the one on this website: I want the menu to slide in from the left while darkening the rest of the screen, just like the site I referenced. Is there a bootstrap template that can ...

jqueryhtmlcsstwitter-bootstrap

Utilizing grid for JavaScript positioning on the website:

Hey there! I have a bunch of javascript files that I want to incorporate into my site using CSS grid. I have the code ready, but I'm a bit confused: Where exactly should I add the columns and rows in the .box-1 class to change its position? Addition ...

javascriptcsscss-grid

Adjusting the placement of elements according to the size of the screen?

I'm facing a very specific issue with my web page design and I need some ideas on how to solve it. The current structure of the page looks like this: <div class="row"> <div id="home-img" class="col-6"> ******An Image Goes He ...

htmlcssbootstrap-4flexbox

Modify radio button colors upon selection with a variety of colors

Looking to create Yes/No buttons that start with a default state of null and change color when pressed - green for yes, red for no. Check out this example code: <label class="formheading">Apparatus group is correct</label> <fieldset data-r ...

javascriptjqueryhtmlcssjquery-mobile

Optimal guidelines for logging in

After successfully creating a website using HTML, CSS, and JavaScript, I am now looking to implement a login feature to provide privacy for certain users. I have noticed that some developers use PHP, while others use JS or Node.js for this purpose. However ...

javascripthtmlnode.jsauthentication

Floating elements within scrolling loading

I've been trying to figure out how to add a loading scroll feature to my webpage, but I'm running into issues with the div not displaying correctly. Instead of loading underneath the scroll, the content pops up on the side as shown here when scro ...

javascriptjquerycssajax

CSS classes designed to mimic JavaScript object attribute-value pairs

I stumbled upon some interesting css class-value combinations within HTML tags. It seems like a specific JavaScript code is interpreting this, but it's something I haven't encountered before. I came across this on www.woothemes.com/flexslider/ (y ...

javascriptcss

How can I effectively access and view HTML files within VSCode while utilizing WSL?

Has anyone else experienced issues with the open-in-browser extension? Whenever I try to open my HTML file for a project, it doesn't load in the browser. I've attempted storing my repository in different directories on Linux and even in a folder ...

htmlvisual-studio-codewindows-subsystem-for-linux

Creating a vertically centered scrollable <div> with Bootstrap 4: A step-by-step guide

My goal is to create a webpage layout like the one shown below: https://i.sstatic.net/xn7UE.jpg In this design, the red box represents a scrollable div whose size adjusts according to the content. The main background featuring the man and the navbar shou ...

cssbootstrap-4

Make sure that the contents of the div are all displayed on a single line

After searching for solutions here, I attempted the suggested code but unfortunately, it did not produce the desired outcome. My goal is to have all the alphabet letters appear on a single line. Kindly disregard my utilization of inline elements: <div ...

htmlcss