Home/ Questions/Q 7530671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T04:58:28+00:00

I have the following code. I want to remove the space between the buttons

  • 0

I have the following code. I want to remove the space between the buttons both horizontally and vertically. How to do that? 

     <%@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 is 

  root 
   { 
     display: block; 
   } 

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

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is most likely being applied by the table itself. By default, a table will have ~3px spacing between cells, plus a padding for each cell (unless you removed them). Try something like this:

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

    See the jsFiddle.

    Buttons, by default, also have a border around them which is white on the top and left, and grey on the bottom and right, to create a push effect. They can easily be removed with:

    button { border: 0 }

    See the jsFiddle.

    • 0