diff --git a/awx/ui/static/less/job-details.less b/awx/ui/static/less/job-details.less
index 157031af5b..b14a75d3d3 100644
--- a/awx/ui/static/less/job-details.less
+++ b/awx/ui/static/less/job-details.less
@@ -306,6 +306,23 @@
         font-size: 12px;
     }
 
+    #plays-table-header table,
+    #plays-table-detail table,
+    #tasks-table-detail table,
+    #tasks-table-header table,
+    #tasks-table-detail table {
+        table-layout:fixed;
+    }
+
+    #plays-table-detail td,
+    #plays-table-header td,
+    #tasks-table-detail td,
+    #tasks-table-header td {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
     #tasks-table-detail {
         height: 150px;
     }
diff --git a/awx/ui/static/partials/job_detail.html b/awx/ui/static/partials/job_detail.html
index 3d10cde60d..a31d7a4716 100644
--- a/awx/ui/static/partials/job_detail.html
+++ b/awx/ui/static/partials/job_detail.html
@@ -152,8 +152,8 @@
                                 </div>
                             </div>
 
-                            <div class="table-header">
-                                <table class="table table-condensed" style="table-layout:fixed;">
+                            <div id="plays-table-header" class="table-header">
+                                <table class="table table-condensed">
                                     <thead>
                                         <tr>
                                             <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
@@ -166,7 +166,7 @@
                             </div>
                             <div id="plays-table-detail" class="table-detail" lr-infinite-scroll="playsScrollDown"
                                 scroll-threshold="10" time-threshold="500">
-                                <table class="table table-condensed" style="table-layout:fixed;">
+                                <table class="table table-condensed">
                                     <tbody>
                                         <tr class="cursor-pointer" ng-repeat="play in plays" ng-class="play.playActiveClass" ng-click="selectPlay(play.id, $event)">
                                             <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ play.created | date: 'HH:mm:ss' }}</td>
@@ -211,7 +211,7 @@
                             </div>
 
                             <div class="table-header">
-                                <table class="table table-condensed" style="table-layout:fixed;">
+                                <table id="tasks-table-header" class="table table-condensed">
                                     <thead>
                                         <tr>
                                             <th class="col-lg-2 col-md-2 col-sm-2 col-xs-3">Started</th>
@@ -225,7 +225,7 @@
                             </div>
                             <div id="tasks-table-detail" class="table-detail" lr-infinite-scroll="tasksScrollDown"
                                 scroll-threshold="10" time-threshold="500">
-                                <table class="table table-condensed" style="table-layout:fixed;">
+                                <table class="table table-condensed">
                                     <tbody>
                                         <tr class="cursor-pointer" ng-repeat="task in taskList = (tasks) track by $index" ng-class="task.taskActiveClass" ng-click="selectTask(task.id)">
                                             <td class="col-lg-2 col-md-2 col-sm-2 col-xs-3">{{ task.created | date: 'HH:mm:ss' }}</td>
@@ -233,7 +233,7 @@
                                                     data-placement="top">{{ task.elapsed }}</td>
                                             <td class="col-lg-1 col-md-2 col-sm-2 col-xs-2 status-column" aw-tool-tip="{{ task.status_tip }}"
                                                 data-tip-watch="task.status_tip" data-placement="top"><i class="fa icon-job-{{  task.status }}"></i></td>
-                                            <td class="col-lg-3 col-md-3 col-sm-6 col-xs-4"><span ng-show="hasRoles">{{ task.role }}</span> {{ task.name }}</td>
+                                            <td class="col-lg-3 col-md-3 col-sm-6 col-xs-4" id="">{{ task.name }}</td>
                                             <td class="col-lg-4 col-md-3 hidden-sm hidden-xs"><div class="status-bar"><div class="successful-hosts inner-bar" id="{{ task.id }}-successful-bar" aw-tool-tip="Hosts OK" data-placement="top" ng-style="task.successfulStyle">{{ task.successfulCount }}</div><div class="changed-hosts inner-bar" id="{{ task.id }}-changed-bar" aw-tool-tip="Hosts Changed" data-placement="top" ng-style="task.changedStyle">{{ task.changedCount }}</div><div class="skipped-hosts inner-bar" id="{{ task.id }}-skipped-bar" aw-tool-tip="Hosts Skipped" data-placement="top" ng-style="task.skippedStyle">{{ task.skippedCount }}</div><div class="failed-hosts inner-bar" id="{{ task.id }}-failed-bar" aw-tool-tip="Hosts Failed" data-placement="top" ng-style="task.failedStyle">{{ task.failedCount }}</div><div class="unreachable-hosts inner-bar" id="{{ task.id }}-unreachable-hosts-bar" aw-tool-tip="Hosts Unreachable" data-placement="top" ng-style="task.unreachableStyle">{{ task.unreachableCount }}</div><div class="missing-hosts inner-bar" id="{{ task.id }}-misssing-hosts-bar" ng-style="task.missingStyle">{{ task.missingCount }}</div><div class="no-matching-hosts inner-bar" id="{{ task.id }}-{{ task.play_id }}-no-matching-hosts-bar" aw-tool-tip="No matching hosts were found" data-placement="top" style="width: 100%;" ng-show="task.status === 'no-matching-hosts'">No matching hosts</div></div></td>
                                         </tr>
                                         <tr ng-show="taskList.length === 0">