Remove Excess space between th and td Elements

Question

I am using a table to display data .I am trying to remove space from the left and right of th and td element.

I have tried checking on stack overflow and other places but they all remove vertical spaces between cells. What i want to remove is remove space from left and right.

  #contact_search{
    border-collapse: collapse;

  }
  #contact_search tr td, #contact_search tr th{
    /* text-align: center; */
    border: 1px solid #006;
    line-height: 1;
  }

<table id="contact_search" > 
    <thead>
        <tr>								
            <th>Nametest</th>  
            <th>Country</th> 
            <th>City</th> 
            <th>Category</th> 
            <th>Work</th>  
            <th>Mobile</th>  
            <th>Email</th>  
            <th>Trades</th>  
         </tr>
    </thead>
    <tbody>
        <td>John Doe</td>
        <td>Australia</td>
        <td>Auckland</td>
        <td>Corporate Client</td>
        <td>3275020</td>
        <td>9926104</td>
        <td>johndoe@example.com</td>
        <td>None</td>
    </tbody>
</table>

This is what i get table

The red circle is what i want to remove.

Answer 1

Sorry about the problem you are experiencing but I cant see it from my end. I wrote a new html file and copied your contents without any edits into it like you can see below but the issue was not detected. You too can try out and see for yourself.

#contact_search{
  border-collapse: collapse;
}
  #contact_search tr td, #contact_search tr th{
  /* text-align: center; */
  border: 1px solid #006;
  line-height: 1;
}

<table id="contact_search" > 
  <thead>
      <tr>                                
          <th>Nametest</th>  
          <th>Country</th> 
          <th>City</th> 
          <th>Category</th> 
          <th>Work</th>  
          <th>Mobile</th>  
          <th>Email</th>  
          <th>Trades</th>  
       </tr>
  </thead>
  <tbody>
      <td>John Doe</td>
      <td>Australia</td>
      <td>Auckland</td>
      <td>Corporate Client</td>
      <td>3275020</td>
      <td>9926104</td>
      <td>johndoe@example.com</td>
      <td>None</td>
  </tbody>
</table>

Possible reasons include:

1. browser issue (try to use a different browser, clear history on your browser)
2. you never saved your edits
3. your css has table attribute already added to it at the top making browser inherit them hence ignoring those for #contact_search

You could try out this for yourself in your css by the way

#contact_search{
    border-collapse: collapse!important;

  }
  #contact_search tr td, #contact_search tr th{
    /* text-align: center; */
    border: 1px solid #006!important;
    line-height: 1!important;
  }

please note the keyword !important for css for overriding attributes.