Question

我有以下代码。我想在水平和垂直方向上移除按钮之间的空间。怎么做？

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

CSS代码

  root 
   { 
     display: block; 
   } 

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

enter image description here

Answer 1

这很可能是由表本身应用的。默认情况下，一个表格在单元格之间会有~3px的间距，加上每个单元格的填充（除非你删除它们）。尝试这样的事情：

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

See the jsFiddle.

默认情况下，按钮周围也有一个边框，顶部和左边是白色，底部和右边是灰色，以创建推动效果。它们可以通过以下方式轻松删除：

button { border: 0 }

See the jsFiddle.

Answer 2

将border-collapse: collapse添加到<table>的样式中。

如何删除表格行或“列”中两个按钮之间的空格？

2 个答案: