Как убрать пробел между двумя кнопками в строке таблицы или «столбце»? - PullRequest
Новая
       49

Как убрать пробел между двумя кнопками в строке таблицы или «столбце»?

0 голосов
/ 22 февраля 2012

У меня есть следующий код. Я хочу убрать пространство между кнопками как по горизонтали, так и по вертикали. Как это сделать? 

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

Ответы [ 2 ]

2 голосов
/ 22 февраля 2012

Скорее всего, это применяется самой таблицей.По умолчанию таблица будет иметь интервал ~ 3px между ячейками плюс отступ для каждой ячейки (если вы не удалили их).Попробуйте что-то вроде этого: 

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

См. JsFiddle.

Кнопки, по умолчанию, также имеют рамку вокруг них, которая белая сверхуи слева, и серым цветом снизу и справа, чтобы создать эффект толчка.Их можно легко удалить с помощью: 

button { border: 0 }

См. JsFiddle.

0 голосов
/ 22 февраля 2012

Добавьте border-collapse: collapse к вашему <table> стилю.

...