fix(module:table): fix table border in firefox (NG-ZORRO#3294)

close NG-ZORRO#3164
andrew-yangy · Jun 20, 2019 · f37aa6c · f37aa6c
1 parent b575d91
commit f37aa6c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git a/components/core/style/index.less b/components/core/style/index.less
@@ -82,6 +82,15 @@
 @table-td-left-cls: ~'@{table-td-cls}-left';
 @table-td-right-cls: ~'@{table-td-cls}-right';
 
+nz-table {
+  .@{table-prefix-cls} {
+    table {
+      border-collapse: separate;
+      border-spacing: 0;
+    }
+  }
+}
+
 .box-shadow-left() {
   .@{table-th-right-cls}-sticky,
   .@{table-td-right-cls}-sticky {
@@ -218,7 +227,7 @@
 }
 
 /** https://github.com/NG-ZORRO/ng-zorro-antd/issues/3241 **/
-.cdk-overlay-pane{
+.cdk-overlay-pane {
   &.nz-dropdown-panel {
     display: block;
   }

diff --git a/components/table/nz-table.component.html b/components/table/nz-table.component.html
@@ -17,7 +17,7 @@
 </ng-template>
 <ng-template #tableInnerTemplate>
   <div #tableHeaderElement
-    *ngIf="nzScroll.x || nzScroll.y"
+    *ngIf="nzScroll.y"
     [ngStyle]="headerBottomStyle"
     class="ant-table-header">
     <table [class.ant-table-fixed]="nzScroll.x" [style.width]="nzScroll.x">

diff --git a/components/table/nz-th.component.html b/components/table/nz-th.component.html
@@ -9,23 +9,25 @@
 </ng-template>
 <span class="ant-table-header-column">
   <div [class.ant-table-column-sorters]="nzShowSort" (click)="updateSortValue()">
-    <div class="ant-table-selection" *ngIf="nzShowRowSelection">
-      <ng-container *ngIf="nzShowCheckbox">
+    <span class="ant-table-column-title">
+      <ng-container *ngIf="nzShowCheckbox && !nzShowRowSelection">
         <ng-template [ngTemplateOutlet]="checkboxTemplate"></ng-template>
       </ng-container>
-      <nz-dropdown nzPlacement="bottomLeft">
-        <div nz-dropdown class="ant-table-selection-down">
-          <i nz-icon type="down"></i>
-        </div>
-        <ul nz-menu class="ant-table-selection-menu">
-          <li nz-menu-item *ngFor="let selection of nzSelections" (click)="selection.onSelect()">{{selection.text}}</li>
-        </ul>
-      </nz-dropdown>
-    </div>
-    <ng-container *ngIf="nzShowCheckbox && !nzShowRowSelection">
-      <ng-template [ngTemplateOutlet]="checkboxTemplate"></ng-template>
-    </ng-container>
-    <span class="ant-table-column-title"><ng-content></ng-content></span>
+      <div class="ant-table-selection" *ngIf="nzShowRowSelection">
+        <ng-container *ngIf="nzShowCheckbox">
+          <ng-template [ngTemplateOutlet]="checkboxTemplate"></ng-template>
+        </ng-container>
+        <nz-dropdown nzPlacement="bottomLeft">
+          <div nz-dropdown class="ant-table-selection-down">
+            <i nz-icon type="down"></i>
+          </div>
+          <ul nz-menu class="ant-table-selection-menu">
+            <li nz-menu-item *ngFor="let selection of nzSelections" (click)="selection.onSelect()">{{selection.text}}</li>
+          </ul>
+        </nz-dropdown>
+      </div>
+      <ng-content></ng-content>
+    </span>
     <div class="ant-table-column-sorter" *ngIf="nzShowSort">
       <div class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full">
         <i nz-icon