How to Delete Border Spacing in Table

How to delete border spacing in table

Your table be like below by default and set the css rules on tables ID or Class

<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <th>1</th>
  <th>2</th>
</tr>
</table>

css:

border-collapse: collapse;

How to remove the default table border/spacing/padding?

make your code as below:

<table style="background-color: blue;" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    </td>
  </tr>
</table>

Can't remove border spacing in table

I was able to fix this by changing two things.

To get your image to stick to the right-side of the column, you need to increase your padding of the second cell from 18px to 30px. Alternatively, you could make each cell the same width, and then float the image to the right.

To get rid of the extra padding underneath the image, you will want to add display: block; to the affected image. <img> is an inline element, therefore it will leave extra padding underneath itself to make room for other elements like text.

If you cannot use display: block; for whichever reason, vertical-align: bottom; will work as well. This will allow you to keep the image inline, and will set the vertical alignment of the image so it matches the bottom of the table cell.

How to remove unwanted space between rows and columns in table?

Add this CSS reset to your CSS code: (From here)

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

It'll reset the CSS effectively, getting rid of the padding and margins.

CSS - Removing border-spacing on first and last columns

Here's a way of doing this (based on your second example):

Remove border-spacing from the table and then add a right border in every td, except the last one.

.grid td {
  padding: 0px 5px 0px 5px;
  border-right: 3px solid white;
}

.grid td:last-child {
  border-right: 0;   
}

jsFiddle Demo

How to remove white space on table border

Lets try this:

.table-bordered {
  border: 1px solid #9a9a9a !important;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
  border: 1px solid #9a9a9a !important;
  /* outline: none; */
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
}

.table-bordered>tbody>tr>td.border-bottom-white {
  border-bottom: 1px solid transparent !important;
}

<table class="table table-bordered">
  <thead>
    <tr>
      <td>H1</td>
      <td>H2</td>
      <td>H3</td>
      <td>H1</td>
      <td>H2</td>
      <td>H3</td>
    </tr>
  </thead>
  <tr>
    <td colspan="3" class="border-bottom-white"></td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="3" class="border-bottom-white"></td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td colspan="3"></td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

How to remove space between lines in the table?

Put

border-collapse: collapse

on table tag

How do i remove white spaces between borders in table

The space between table cells can be removed easily using cellspacing and cellpadding.
Give cellspacing and cellpadding as 0 in table
eg: <table cellspacing="0" cellpadding="0">

Try the below code. This may help you.

h1 {
  font-family: 'Lobster Two';
  font-weight: 600;
  font-size: 4rem;
}

.leaderboard-header {
  text-align: center;
  padding-bottom: 80px;
}

.table {
  table-layout: auto;
  margin-left: auto;
  margin-right: auto;
  width: max-content; 
  border-spacing: 0;
  text-align: center;
}

.table th, td {
  text-align: center;
  font-family: 'Roboto';
  border-collapse: collapse;
  border: solid 1px;
  padding-left: 5px;
  padding-right: 5px;
}
   

 table
{
    border-collapse: collapse;
}

 <div className="leaderboards">
      <div className="leaderboard-header">
        <h1>Leaderboards</h1>
      </div>
      <div className="table">
        <table align="center" cellspacing="0" cellpadding="0">
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Breed</th>
            <th>Dog Size</th>
            <th>Neutered</th>
          </tr>
          <tr>
            <td>Oscar</td>
            <td>2</td>
            <td>Boxer</td>
            <td>Medium</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Lilly</td>
            <td>4</td>
            <td>French Bulldog</td>
            <td>Small</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Blue</td>
            <td>5</td>
            <td>Cocker Spaniel</td>
            <td>Medium</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Spike</td>
            <td>3</td>
            <td>Staffy</td>
            <td>Medium</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Bella</td>
            <td>9</td>
            <td>American Bulldog</td>
            <td>Large</td>
            <td>Yes</td>
          </tr>
        </table>
        </div>
    </div>

---

Related Topics