How to remove gap between two td

How to remove gap between two td ? I have tried some below solutions
from the Internet but none of them work. Attached the screenshot for
reference too. It will give clear idea of problem. The gap between two TD is very wide. How to reduce this Gap.

>
> 1. class="align-middle"
> 2. CELLSPACING=0
> 3. row-gap: 0;
> 4. class="views-field views-field-region views-align-center"

<app-header></app-header>
<section class="container">
<div class="row" style="background-color: white;">
<div class="col-xs-12 col-sm-8 col-md-4" >
<form action="/update/pricelist" method="POST" id="upload-file" enctype="multipart/form-data">
<h3>Import Pricelist</h3>
<hr>
<div class="wrapper-messages">
</div>
<br>
<input type="file" name="price_list" id="edit_price_list" (change)="ReadExcel($event)">
<div class="error-msg"></div>
<hr>
<div class="views-exposed-widget views-submit-button">
<button  type="submit" class="btn btn-info form-submit icon-before submit-pricelist">
<span class="icon glyphicon glyphicon-ok" aria-hidden="true"></span>
Import
</button>
</div>
<br>
</form>
</div>
</div>
</section>
<!-- Table for excel -->
<div class="main-container container-fluid">
<div class="row">
<section id="block-views-exp-land-page" class="block block-views clearfix">
<form autocomplete="off" action="" method="post" id="views-exposed-form-land-page" accept-charset="UTF-8">
<div>
<section id="block-system-main" class="block block-system clearfix">
<div
class="view view-land view-id-land view-display-id-page table-checkbox-all view-dom-id-8d32f83bab6c36c396b926a7c7c35f7f">
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr>
<th class="views-field views-field-region views-align-center">
<a href="#" title="sort by Region" class="active" name="autodeskm">Autodesk Material Description</a>
</th>
<th class="views-field views-field-php-4 views-align-center">
<a href="#" title="sort by Autodesk SAP Material Description" class="active">Autodesk SAP Material Description</a>
</th>
<th class="views-field views-field-php-2 views-align-center">
<a href="#" title="sort by Product Coming From" class="active">Product Coming From</a>
</th>
<th class="views-field views-field-php-2 views-align-center">
<a href="#" title="sort by Media" class="active">Media</a>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr *ngFor="let pricedata of ExcelData" class="align-middle">
<td>
{{pricedata.Autodesk_Material_Description}}
</td>
<td>
{{pricedata.Autodesk_SAP_Material_Description}}
</td>
<td>
{{pricedata.Product_Coming_From}}
</td>
<td>
{{pricedata.Media}}
</td>  
</tr>
</thead>
</table>
</div>
</div>
</section>
</div>
</form>
</section>
</div>
</div>
<app-footer></app-footer>[enter image description here][1]

Perhaps border-collapse: collapse; is what you’re missing?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

td {
background: red;
color: white;
padding: 0.5em;
}
.t1 {
margin-top: 2em;
border-collapse: collapse;
}

<!-- language: lang-html -->

<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
<table class="t1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>

<!-- end snippet -->

I suggest you looking for html table colspan (https://html.com/tables/rowspan-colspan/). With colspan you can merge two td cells. Take a look in the example below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

td {
width: 30px;
}

<!-- language: lang-html -->

<table border="1">
<tr>
<td colspan="2">Merged</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

<!-- end snippet -->