如何消除两个td元素间的间距？已试多种方案无效

问题描述 #

我遇到表格中两个td元素间距过宽的问题，尝试了以下几种从网上获取的解决方案，但均未生效，希望能了解如何缩小该间距。

尝试过的方案：

• class="align-middle"
• CELLSPACING=0
• row-gap: 0;
• 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>

解决方案 #

1. 修正表格结构错误 #

你把数据行错误地放在了<thead>标签内，这不符合HTML规范——<thead>仅用于表头，数据行必须放入<tbody>中。结构错误会导致浏览器样式解析异常，是间距过大的核心原因之一。

修正后的表格代码片段：

<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保持不变 -->
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>

2. 强制重置表格间距与内边距 #

通过CSS覆盖框架默认样式，直接控制单元格间距和内边距：

/* 合并表格边框，消除单元格间默认空白 */
.neilsoft-region-table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 缩小td内边距，减少视觉上的间距（数值可按需调整） */
.neilsoft-region-table td {
  padding: 4px 8px;
}

3. 修复冗余的class属性写法 #

你的<div>标签重复声明了多个class属性（比如<div class="table-responsive" class="col-10"...>），HTML中一个元素只能有一个class属性，多个类名需用空格分隔，否则仅第一个类会生效，可能导致布局错乱。

修正后：

<div class="table-responsive col-10 row align-items-center col-md-12">

内容的提问来源于stack exchange，提问作者Rohit Tarang