CODEWITHSUNDEEP
htmlcss
Demonel
Demonel

Reputation: 117

Remove space between two rows of small buttons in a table

All solutions that I have found helped when I use buttons which size more than ~25px and I have no spaces between rows. However when I'm trying to use buttons which size less (like 18 px) spaces between rows appear. So far only margin: -px helped me reduce spaces a bit.

<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; display: block;">
  <tr style="padding: 0;">
    <td style="padding: 0;">
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
    </td>
  </tr>
  <tr style="padding: 0;">
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
  </tr>
  <tr style="padding: 0;">
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
  </tr>
  <tr style="padding: 0;">
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
  </tr>
</table>

screen

Upvotes: 0

Views: 333

Answers (1)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">


<title>Untitled</title>
<style>td {line-height: 18px;}</style>

</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse; border-spacing: 0; display: block;">
  <tr style="padding: 0;">
    <td style="padding: 0;">
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
    </td>
  </tr>
  <tr style="padding: 0;">
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
  </tr>
  <tr style="padding: 0;">
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
  </tr>
  <tr style="padding: 0;">
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
    <td style="padding: 0;">
      <button style="background-color:blue; width: 18px; height: 18px; border: 0; margin-top: -16px; margin-bottom: -16px; font-size: 0pt;" />
    </td>
  </tr>
</table>
</body>
</html>

Upvotes: 1

Related Questions