Why is there white space between the rows? I set all the margins and paddings to 0, but I can't get rid of the white space

Question

I copied the table code from Bootstrap and set each of the rows to have its own background color, but there is white space in between each 1 and I do not know why.

I set all the border, margins and paddings to 0 for all the "tr"s, "tbody" and the "thead."

Question: What can I do in order to prevent the white spaces appearing around table cells?

#C1{

  margin-top: 40px;
  width: 75%;
  border: 1px solid black;
  padding: 0px;
}
.table-red{
  background-color: red;
  color: #ffffff
}
.table{
  margin-bottom: 0px;
  padding: 0px;
}

.table-striped tbody tr:nth-of-type(even){

    background-color: red;
    color: white;

}
.table-striped tbody tr:nth-of-type(odd){
    background-color: blue;
    color: white;
    border: 0;
}
thead{
    background-color: green;
    border: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
}
th{
    border: 0px;
}
tbody{
    margin-top: 0px;

}

 <div class="container" id="C1">
    <table class="table table-striped">
      <thead >
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
 </div>

The white space should disappear

Possible duplicate of [How to remove unwanted space between rows and columns in table?](https://stackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table) — Feelsbadman, Jan 03 '19 at 04:00

Feelsbadman · Accepted Answer · 2019-01-03T22:50:00.203

3

option 1: (CSS)

The border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

The border-spacing property sets the distance between the borders of adjacent cells.

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

option 2: (HTML)

The cellspacing attribute specifies the space, in pixels, between cells.

<table .. cellspacing="0"> .. </table>

opt1: https://www.w3schools.com/cssref/pr_border-collapse.asp
& https://www.w3schools.com/cssref/pr_border-spacing.asp

opt2: https://www.w3schools.com/tags/att_table_cellspacing.asp

EDIT: OP had bootstrap files fetched from a CDN and there were 2 css rules which added borders:

FILE: _tables.scss LINE: 5

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
}

FILE: bootstrap.css LINE: 1524

.table td, .table th {

    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;

}

These can easily be overriden by adding the following to the default css file:

.table thead th { 
    border-bottom: none !important; 
}
.table td, .table th { 
    border-top:none !important; 
}

edited Jan 03 '19 at 22:50

answered Jan 03 '19 at 03:50

Feelsbadman

1,163
4
17
37

It worked here tho. Could you post what you've tried so far? (edit the question) – Feelsbadman Jan 03 '19 at 04:29
table{ border-collapse: collapse; border-spacing: 0px; } – Vamsi Krishna Jan 03 '19 at 04:32
Well, not what I meant but ok. Would you add `!important` at the end of each value like this: `border-collapse: collapse !important;` just to make sure that the values are not overriden by other css rules. – Feelsbadman Jan 03 '19 at 04:34
– Vamsi Krishna Jan 03 '19 at 04:34
in your browser, right click on the table and analyse the css section. See if the rules are set. example: https://i.imgur.com/QtyFZqt.png – Feelsbadman Jan 03 '19 at 04:35
Yes I tried that as well. table { margin-bottom: 0px; border-spacing: 0 !important; border-collapse: collapse !important; padding: 0px; } – Vamsi Krishna Jan 03 '19 at 22:09
@VamsiKrishna Would you be able to post your html & css content? (upload on pastebin) I would like to analyse what's going on with it. – Feelsbadman Jan 03 '19 at 22:13
@VamsiKrishna Ok found the bug: What kept spacecollapsing from working was that there are borders. Details here: https://pastebin.com/tSQJ7Sq9 – Feelsbadman Jan 03 '19 at 22:21
I copied and pasted what is in the "RAW paste data" while deleting the border line and nothing changed. – Vamsi Krishna Jan 03 '19 at 22:32
You're not supposed to copy the pastebin. That was to show which file and which line to modify. – Feelsbadman Jan 03 '19 at 22:34
I really appreciate your help, but I don't have a "bootstrap.css" or a "_tables.scss" file. – Vamsi Krishna Jan 03 '19 at 22:37
1

@VamsiKrishna Oh, right. Just saw that. Then you have two options: you either download bootstrap files and modify them. or override those by adding: `.table thead th { border-bottom: none !important; }` and `.table td, .table th { border-top:none !important; }` inside your – Feelsbadman Jan 03 '19 at 22:39
1

I know SO says to avoid "thank you," but THANK YOU so much. It worked! – Vamsi Krishna Jan 03 '19 at 22:41
1

Well you could thank me by accepting the answer :) . – Feelsbadman Jan 03 '19 at 22:42

Why is there white space between the rows? I set all the margins and paddings to 0, but I can't get rid of the white space

1 Answers1

option 1: (CSS)

option 2: (HTML)