diff --git a/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json b/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json
new file mode 100644
index 00000000000000..711ddf9131d25d
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/details-header_2018-04-07-01-42.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix style and alignment issues with DetailsList headers",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "tmichon@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
index 30636a35048729..eddd4e3b345d7e 100644
--- a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
+++ b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
@@ -50,6 +50,8 @@ $menuHeaderColor: "[theme:menuHeader, default: #0078d4]";
 /* Lists */
 $listBackgroundColor: "[theme:listBackground, default: #ffffff]";
 $listTextColor: "[theme:listText, default: #333333]";
+$listItemHeaderHoveredColor: "[theme:listItemHeaderHovered, default: #f4f4f4]";
+$listItemHeaderActivatedColor: "[theme:listItemActivatedHovered, default: #eaeaea]";
 $listItemBackgroundHoveredColor: "[theme:listItemBackgroundHovered, default: #f8f8f8]";
 $listItemBackgroundCheckedColor: "[theme:listItemBackgroundChecked, default: #eaeaea]";
-$listItemBackgroundCheckedHoveredColor: "[theme:listItemBackgroundCheckedHovered, default: #d0d0d0]";
\ No newline at end of file
+$listItemBackgroundCheckedHoveredColor: "[theme:listItemBackgroundCheckedHovered, default: #d0d0d0]";
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
index 6ee10c6f42cd2e..4927094cbd7b25 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
@@ -64,11 +64,11 @@ $isPaddedMargin: 24px;
 
     &:hover {
       color: $bodyTextColor;
-      background: $bodyBackgroundColor;
+      background: $listItemHeaderHoveredColor;
     }
 
     &:active {
-      background: $listItemBackgroundHoveredColor;
+      background: $listItemHeaderActivatedColor;
     }
   }
 
@@ -161,16 +161,23 @@ $isPaddedMargin: 24px;
 }
 
 .cellTitle {
-  display: block;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+  box-sizing: border-box;
   overflow: hidden;
-  @include focus-border($position: absolute);
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+  max-width: 100%;
+  @include focus-border($position: auto);
   padding: 0 8px;
 }
 
+.cellName {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 :global(.ms-TooltipHost).checkTooltip {
   display: block;
 }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
index 445fde7394f444..d1ce5425fac5fc 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
@@ -253,7 +253,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
                           className={ css('ms-DetailsHeader-cellTitle', styles.cellTitle) }
                           data-is-focusable={ column.columnActionsMode !== ColumnActionsMode.disabled }
                           role={ column.columnActionsMode !== ColumnActionsMode.disabled ? 'button' : undefined }
-                          aria-describedby={ `${this._id}-${column.key}-tooltip` }
+                          aria-describedby={ this.props.onRenderColumnHeaderTooltip ? `${this._id}-${column.key}-tooltip` : undefined }
                           onContextMenu={ this._onColumnContextMenu.bind(this, column) }
                           onClick={ this._onColumnClick.bind(this, column) }
                           aria-haspopup={ column.columnActionsMode === ColumnActionsMode.hasDropdown }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
index 311fa3eb38b373..9ac12c1175ed2f 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap
@@ -135,7 +135,7 @@ exports[`DetailsHeader can render 1`] = `
       className=""
     >
       <span
-        aria-describedby="header0-a-tooltip"
+        aria-describedby={undefined}
         aria-haspopup={false}
         aria-label={undefined}
         aria-labelledby="header0-a-name "
@@ -183,7 +183,7 @@ exports[`DetailsHeader can render 1`] = `
       className=""
     >
       <span
-        aria-describedby="header0-b-tooltip"
+        aria-describedby={undefined}
         aria-haspopup={false}
         aria-label={undefined}
         aria-labelledby="header0-b-name "
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
index d4d66656bcecad..abd0be34f4a017 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
@@ -161,7 +161,7 @@ exports[`DetailsList renders List correctly 1`] = `
               className=""
             >
               <span
-                aria-describedby="header0-key-tooltip"
+                aria-describedby={undefined}
                 aria-haspopup={false}
                 aria-label={undefined}
                 aria-labelledby="header0-key-name "
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx
index 472e8ca474fef2..67bf30c6857983 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx
@@ -104,6 +104,7 @@ export class DetailsListDocumentsExample extends React.Component<any, IDetailsLi
         fieldName: 'name',
         minWidth: 16,
         maxWidth: 16,
+        onColumnClick: this._onColumnClick,
         onRender: (item: IDocument) => {
           return (
             <img