CODEWITHSUNDEEP
htmlcssbuttonspacing
CodeBlue
CodeBlue

Reputation: 15409

How to remove space between two buttons in a table row or "column"?

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

Upvotes: 0

Views: 6881

Answers (2)

animuson
animuson

Reputation: 54787

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.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324800

Add border-collapse: collapse to your <table>'s style.

Upvotes: 0

Related Questions