What is the best way to eliminate the space between two buttons in a table row or "column"?

Below is the code snippet that I am working with. I am trying to figure out a way to eliminate the space between the buttons both horizontally and vertically. Can someone guide me on how to achieve this?

     <%@page contentType="text/html" pageEncoding="UTF-8"%>
     <!DOCTYPE html>
     <html>
     <head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>The Main Page</title>
    </head>
    <body>
    <table>
            <tr>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
            </tr>
            <tr>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
                <td><button></button></td>
            </tr>

    </table>

</body>

The CSS code below can be applied for styling:

  root 
   { 
     display: block; 
   } 

  button 
   {
     background-image:url('darkSquare.jpg');
     width:50px; 
     height:50px; 
   }

This code needs to be modified in order to remove spacing between the buttons in both directions.

Answer №1

The spacing you are seeing is likely due to the table itself. By default, tables have a ~3px space between cells and padding for each cell (unless removed). You can fix this by adding the following CSS:

table { border-collapse: collapse; border-spacing: 0 }
td { padding: 0 }

Check out the jsFiddle example.


Buttons also have a default border that creates a push effect. This border is white on the top and left, and grey on the bottom and right. You can remove this border using the following CSS:

button { border: 0 }

View the updated jsFiddle here.

Answer №2

Ensure you include border-collapse: collapse in your CSS for <table>.

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

Resizing Images with Bootstrap

While working with twitter bootstrap 2.2.2, I have noticed that the image in the "hero" div resizes correctly when the page loads initially. However, it then unexpectedly expands beyond the div boundaries and gets cut off. You can view the page here: It ...

Cursor or caret bleeding through overlay on Internet Explorer

Currently, I am working on a pre-existing website called www.shopthethirdfloor.com. When using Internet Explorer, if you navigate to the products menu, select the search box, and then scroll down so that the search field goes underneath the menu overlay ...

Angular component: Placing icons on the right side of a mat-chip element

My mat-chip contains content and a cancel icon, but I am having trouble getting the cancel icon to float to the right consistently. Despite setting a fixed width for the mat-chip, the cancel icon is not aligning properly no matter what CSS techniques I t ...

Center Align Images in HTML List Items

Hey there! I'm currently diving into the world of web development with responsive design, but I'm still a bit of a newbie. So please bear with me as I try to explain my issue in detail. If you need more information, just let me know! My current ...

What are the steps to set up i18next in my HTML?

I have a project using nodejs, express, and HTML on the client side. I am looking to localize my application by incorporating i18next. So far, I have successfully implemented i18next on the nodejs side by requiring it and setting it up. var i18n = require ...

I'm attempting to use Bootstrap to align my divs, but unfortunately, it doesn't seem to be working as I had hoped

I've been attempting to align divs using bootstrap, but I'm encountering issues. I prefer not to use a table for this purpose and have experimented with the table tag, but would rather achieve alignment with divs and bootstrap. My familiarity ...

An unusual 1px variance appears in the background-image on Internet Explorer

Having trouble with a sprite of two images showing a 1px difference in ALL versions of Internet Explorer, yet working perfectly in Firefox. Check out the demonstration here: http://jsfiddle.net/bHUs3/6/ I'm feeling frustrated. What could be causing ...

The component next/image is experiencing issues when used in conjunction with CSS

I struggled to create a border around an image because the custom CSS I wrote was being overridden by the Image component's CSS. Despite trying to leverage Tailwind and Bootstrap to solve the problem, my efforts were unsuccessful. Now, I am at a loss ...

What is the best way to ensure a consistent time interval between invoking two functions in JavaScript?

Is there a way to create a code that will call one function, let's say toStart(), and then immediately call another function, toStop(), exactly two seconds after the first function is initiated? I want this process to continue until a specific button, ...

The arrangement of pictures on a card

I decided to tweak the original concept by placing the images inside a Bootstrap card. However, the end result is that the images appear to be floating. https://i.stack.imgur.com/Uf721.png Any suggestions on how to make them fit nicely within the card? ...

Can a vertical line be sketched next to a horizontal line?

Let's keep it short and sweet. Here's what I'm attempting to achieve: https://i.sstatic.net/e2ZU2.png Currently, this is what I have: https://i.sstatic.net/cagv7.png Below is the code snippet: #ligne_horizontale_experience { ma ...

Ensure that CSS is integrated correctly

I have a main Django template that incorporates another template for the navigation bar. I currently have separate CSS files for both the main page and the navbar. My query is: what is the correct method to include the CSS from the navbar in the main p ...

Explore various locations and conceal different divs by clicking

Can someone help me figure out how to hide the placeholders when the focus changes in a form? Here is the code snippet that illustrates my problem. Your assistance is greatly appreciated, João var inputs = Array.prototype.slice.call(document.querySele ...

Using jQuery and AJAX to submit a dynamic form

I am currently facing an issue with cloning a HTML drop down list using jQuery. The main problem I am encountering is that there seems to be no restriction on the number of cloned sections, and I need to store all these sections in a mySQL database. How c ...

Issue with CSS: Hover effect causing unexpected additional white space

My main goal is to implement a hover effect that covers an entire section, but I'm facing some challenges. When I hover over my products, it doesn't behave as expected and adds extra white space below while not covering the section properly. Thi ...

Different ways to swap table cells using only CSS

Does anyone know how to switch the positions of table cells using only CSS? I have three divs set up like this: #content { width: 1000px; display: table; float: none; vertical-align: top; border: 1px solid red; } #left { float: left; } #ri ...

Troubleshooting problem with displaying HTML content on Internet Explorer 10

My website was developed using jquery with a dynamic coding style. It was functioning properly in IE10 while working from Visual Studio. However, after deploying it to the production server, the entire style seemed broken in IE10. In all other versions o ...

Showcasing pictures with a prominent large image accompanied by two smaller ones on the right side

In my use of Material-ui-next, I am attempting to create images in a specific layout. ------ --------- | | | | 2 | | | | 1 |---| | | | | 3 | ------ --------- I have encountered some unusual issues. 1 - 3 appears below 1 ...

Completion status of circle loader: 100%

I am currently facing some challenges getting the circle loader to work correctly. Although I can handle basic animations, the code I found on CodePen is a bit more advanced than what I am used to. I am using it as a learning experience to understand how i ...

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...