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

【问题标题】：How to remove space between two buttons in a table row or "column"?如何删除表格行或“列”中两个按钮之间的空格？
【发布时间】：2012-03-13 03:22:57
【问题描述】：

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

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

【问题讨论】：

您可能需要检查您的 darkSquare.jpg 图片，看看是否有空间。
图片为60px x 60px

标签： html css button spacing

【解决方案1】：

这很可能是由表本身应用的。默认情况下，表格的单元格之间的间距约为 3px，每个单元格都有一个填充（除非您删除了它们）。试试这样的：

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

See the jsFiddle.

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

button { border: 0 }

See the jsFiddle.

【讨论】：

@CodeBlue：尝试将padding: 0 添加到表格单元格样式中。
好的，我把td的padding设为0，现在按钮之间只有少量的空白。
@CodeBlue：如果你同时使用它们，它应该可以工作。 jsfiddle.net/XvSeF/6
好的，这与我得到的输出相同。但是还是有空白的吧？
你说的是按钮周围的边框吗？尝试添加button { border: 0 } 看看是不是你想要的。

【解决方案2】：

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

【讨论】：

table {border-collapse:collapse} 在 CSS 中是这样的吗？我试过了，但没有用。