diff --git a/web/gui/src/main/webapp/app/directives.js b/web/gui/src/main/webapp/app/directives.js
index bac559b..98aef8e 100644
--- a/web/gui/src/main/webapp/app/directives.js
+++ b/web/gui/src/main/webapp/app/directives.js
@@ -79,14 +79,5 @@
                     });
                 }
             };
-        }])
-
-        // create a general ng-repeat complete notifier directive
-        .directive('ngRepeatDone', [function () {
-            return function (scope) {
-                if (scope.$last) {
-                    scope.$emit('LastElement');
-                }
-            };
         }]);
 }());
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index adae2d0..9bdf1c1 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -35,72 +35,62 @@
     // internal state
     var currCol = {},
         prevCol = {},
+        cstmWidths = {},
         sortIconAPI;
 
-    // Functions for creating a scrolling table body with fixed table header
+    // Functions for resizing a tabular view to the window
 
     function _width(elem, width) {
         elem.style('width', width);
     }
 
-    function defaultSize(table, width) {
-        var thead = table.select('.table-header').select('table'),
-            tbody = table.select('.table-body').select('table'),
-            wpx = width + 'px';
-        _width(thead, wpx);
-        _width(tbody, wpx);
+    function findCstmWidths(table) {
+        var headers = table.select('.table-header').selectAll('td');
+
+        headers.each(function (d, i) {
+            var h = d3.select(this),
+                index = i.toString();
+            if (h.classed(tableIcon)) {
+                cstmWidths[index] = tableIconTdSize + 'px';
+            }
+            if (h.attr(colWidth)) {
+                cstmWidths[index] = h.attr(colWidth);
+            }
+        });
+        if (fs.debugOn('widget')) {
+            $log.debug('Headers with custom widths: ', cstmWidths);
+        }
     }
 
-    function adjustTable(table, width, height) {
-        var thead = table.select('.table-header').select('table'),
-            tbodyDiv = table.select('.table-body'),
-            tbody = tbodyDiv.select('table'),
-            cstmWidths = {};
+    function setTdWidths(elem, width) {
+        var tds = elem.select('tr:first-child').selectAll('td');
+        _width(elem, width + 'px');
 
-        function findCstmWidths() {
-            var headers = thead.selectAll('td');
-
-            headers.each(function (d, i) {
-                var h = d3.select(this),
-                    index = i.toString();
-                if (h.classed(tableIcon)) {
-                    cstmWidths[index] = tableIconTdSize + 'px';
-                }
-                if (h.attr(colWidth)) {
-                    cstmWidths[index] = h.attr(colWidth);
-                }
-            });
-            if (fs.debugOn('widget')) {
-                $log.debug('Headers with custom widths: ', cstmWidths);
+        tds.each(function (d, i) {
+            var td = d3.select(this),
+                index = i.toString();
+            if (cstmWidths.hasOwnProperty(index)) {
+                _width(td, cstmWidths[index]);
             }
+        });
+    }
+
+    function setHeight(thead, body, height) {
+        var h = height - (mast.mastHeight() +
+            fs.noPxStyle(d3.select('.tabular-header'), 'height') +
+            fs.noPxStyle(thead, 'height') + pdg);
+        body.style('height', h + 'px');
+    }
+
+    function adjustTable(haveItems, tableElems, width, height) {
+        if (haveItems) {
+            setTdWidths(tableElems.thead, width);
+            setTdWidths(tableElems.tbody, width);
+            setHeight(tableElems.thead, tableElems.table.select('.table-body'), height);
+        } else {
+            setTdWidths(tableElems.thead, width);
+            _width(tableElems.tbody, width + 'px');
         }
-
-        function setTdWidths(elem) {
-            var tds = elem.selectAll('tr:not(.ignore-width)').selectAll('td');
-            _width(elem, width + 'px');
-
-            tds.each(function (d, i) {
-                var td = d3.select(this),
-                    index = i.toString();
-                if (cstmWidths.hasOwnProperty(index)) {
-                    _width(td, cstmWidths[index]);
-                }
-            });
-        }
-
-        function setHeight(body) {
-            var h = height - (mast.mastHeight() +
-                fs.noPxStyle(d3.select('.tabular-header'), 'height') +
-                fs.noPxStyle(thead, 'height') + pdg);
-            body.style('height', h + 'px');
-        }
-
-        findCstmWidths();
-        setTdWidths(thead);
-        setTdWidths(tbody);
-        setHeight(tbodyDiv);
-
-        cstmWidths = {};
     }
 
     // Functions for sorting table rows by header
@@ -147,7 +137,7 @@
     }
 
     angular.module('onosWidget')
-        .directive('onosFixedHeader', ['$log','$window',
+        .directive('onosTableResize', ['$log','$window',
             'FnService', 'MastService',
 
             function (_$log_, _$window_, _fs_, _mast_) {
@@ -158,31 +148,41 @@
                 mast = _mast_;
 
                 var table = d3.select(element[0]),
-                    canAdjust = false;
+                    tableElems = {
+                        table: table,
+                        thead: table.select('.table-header').select('table'),
+                        tbody: table.select('.table-body').select('table')
+                    },
+                    wsz;
 
+                findCstmWidths(table);
+
+                // adjust table on window resize
                 scope.$watchCollection(function () {
                     return {
                         h: $window.innerHeight,
                         w: $window.innerWidth
                     };
                 }, function () {
-                    var wsz = fs.windowSize(0, 30),
-                        wWidth = wsz.width,
-                        wHeight = wsz.height;
+                    wsz = fs.windowSize(0, 30);
+                    adjustTable(
+                        scope.tableData.length,
+                        tableElems,
+                        wsz.width, wsz.height
+                    );
+                });
 
-                    if (!scope.tableData.length) {
-                        defaultSize(table, wWidth);
-                    }
+                // adjust table when data changes
+                scope.$watchCollection('tableData', function () {
+                    adjustTable(
+                        scope.tableData.length,
+                        tableElems,
+                        wsz.width, wsz.height
+                    );
+                });
 
-                    scope.$on('LastElement', function () {
-                        // only adjust the table once it's completely loaded
-                        adjustTable(table, wWidth, wHeight);
-                        canAdjust = true;
-                    });
-
-                    if (canAdjust) {
-                        adjustTable(table, wWidth, wHeight);
-                    }
+                scope.$on('$destroy', function () {
+                    cstmWidths = {};
                 });
             };
         }])
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index f2e4dd3..8bfd202 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -31,7 +31,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -50,16 +50,15 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="5">
                         No Applications found
                     </td>
                 </tr>
 
-                <tr ng-repeat="app in tableData"
+                <tr ng-repeat="app in tableData track by $index"
                     ng-click="selectCallback($event, app)"
-                    ng-class="{selected: app.id === selId}"
-                    ng-repeat-done>
+                    ng-class="{selected: app.id === selId}">
                     <td class="table-icon">
                         <div icon icon-id="{{app._iconid_state}}"></div>
                     </td>
diff --git a/web/gui/src/main/webapp/app/view/app/app.js b/web/gui/src/main/webapp/app/view/app/app.js
index 764447e..55ccd94 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -63,7 +63,6 @@
             selCb: selCb,
             respCb: refreshCtrls
         });
-        $scope.toggleRefresh();
 
         $scope.appAction = function (action) {
             if ($scope.ctrlBtnState.selection) {
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.html b/web/gui/src/main/webapp/app/view/cluster/cluster.html
index 8750cac..e1db4ee 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.html
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.html
@@ -25,7 +25,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -44,14 +44,13 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="5">
                         No Cluster Nodes found
                     </td>
                 </tr>
 
-                <tr ng-repeat="node in tableData"
-                    ng-repeat-done>
+                <tr ng-repeat="node in tableData track by $index">
                     <td class="table-icon">
                         <div icon icon-id="{{node._iconid_state}}"></div>
                     </td>
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 364efc2..564d6c4 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -9,7 +9,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -32,16 +32,15 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="9">
                         No Devices found
                     </td>
                 </tr>
 
-                <tr ng-repeat="dev in tableData track by dev.id"
+                <tr ng-repeat="dev in tableData track by $index"
                     ng-click="selectCallback($event, dev)"
-                    ng-class="{selected: dev.id === selId}"
-                    ng-repeat-done>
+                    ng-class="{selected: dev.id === selId}">
                     <td class="table-icon">
                         <div icon icon-id="{{dev._iconid_available}}"></div>
                     </td>
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.css b/web/gui/src/main/webapp/app/view/flow/flow.css
index 3e5cb2c..b1fe49d 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow.css
@@ -26,24 +26,24 @@
     width: 45px;
 }
 
+.light #ov-flow tr:nth-child(6n + 1),
 .light #ov-flow tr:nth-child(6n + 2),
-.light #ov-flow tr:nth-child(6n + 3),
-.light #ov-flow tr:nth-child(6n + 4) {
+.light #ov-flow tr:nth-child(6n + 3) {
     background-color: #eee;
 }
+.light #ov-flow tr:nth-child(6n + 4),
 .light #ov-flow tr:nth-child(6n + 5),
-.light #ov-flow tr:nth-child(6n + 6),
-.light #ov-flow tr:nth-child(6n + 1) {
+.light #ov-flow tr:nth-child(6n) {
     background-color: #ddd;
 }
+.dark #ov-flow tr:nth-child(6n + 1),
 .dark #ov-flow tr:nth-child(6n + 2),
-.dark #ov-flow tr:nth-child(6n + 3),
-.dark #ov-flow tr:nth-child(6n + 4) {
+.dark #ov-flow tr:nth-child(6n + 3) {
     background-color: #444;
 }
+.dark #ov-flow tr:nth-child(6n + 4),
 .dark #ov-flow tr:nth-child(6n + 5),
-.dark #ov-flow tr:nth-child(6n + 6),
-.dark #ov-flow tr:nth-child(6n + 1) {
+.dark #ov-flow tr:nth-child(6n) {
     background-color: #333;
 }
 
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index a79e925..38059cd 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -12,7 +12,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -36,13 +36,13 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="10">
                         No Flows found
                     </td>
                 </tr>
 
-                <tr ng-repeat-start="flow in tableData">
+                <tr ng-repeat-start="flow in tableData track by $index">
                     <td>{{flow.id}}</td>
                     <td>{{flow.appId}}</td>
                     <td>{{flow.groupId}}</td>
@@ -54,11 +54,10 @@
                     <td>{{flow.packets}}</td>
                     <td>{{flow.bytes}}</td>
                 </tr>
-                <tr class="ignore-width">
+                <tr>
                     <td class="selector" colspan="10">{{flow.selector}}</td>
                 </tr>
-                <tr class="ignore-width"
-                    ng-repeat-end ng-repeat-done>
+                <tr ng-repeat-end>
                     <td class="treatment" colspan="10">{{flow.treatment}}</td>
                 </tr>
             </table>
diff --git a/web/gui/src/main/webapp/app/view/group/group.css b/web/gui/src/main/webapp/app/view/group/group.css
index 8553ddc..182f44c 100644
--- a/web/gui/src/main/webapp/app/view/group/group.css
+++ b/web/gui/src/main/webapp/app/view/group/group.css
@@ -26,20 +26,20 @@
     width: 45px;
 }
 
-.light #ov-group tr:nth-child(4n + 2),
-.light #ov-group tr:nth-child(4n + 3) {
+.light #ov-group tr:nth-child(4n + 1),
+.light #ov-group tr:nth-child(4n + 2) {
     background-color: #eee;
 }
-.light #ov-group tr:nth-child(4n + 4),
-.light #ov-group tr:nth-child(4n + 1) {
+.light #ov-group tr:nth-child(4n + 3),
+.light #ov-group tr:nth-child(4n) {
     background-color: #ddd;
 }
-.dark #ov-group tr:nth-child(4n + 2),
-.dark #ov-group tr:nth-child(4n + 3) {
+.dark #ov-group tr:nth-child(4n + 1),
+.dark #ov-group tr:nth-child(4n + 2) {
     background-color: #444;
 }
-.dark #ov-group tr:nth-child(4n + 4),
-.dark #ov-group tr:nth-child(4n + 1) {
+.dark #ov-group tr:nth-child(4n + 3),
+.dark #ov-group tr:nth-child(4n) {
     background-color: #333;
 }
 
diff --git a/web/gui/src/main/webapp/app/view/group/group.html b/web/gui/src/main/webapp/app/view/group/group.html
index 22cd5ee..a2b38e0 100644
--- a/web/gui/src/main/webapp/app/view/group/group.html
+++ b/web/gui/src/main/webapp/app/view/group/group.html
@@ -28,7 +28,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -48,13 +48,13 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="6">
                         No Groups found
                     </td>
                 </tr>
 
-                <tr ng-repeat-start="group in tableData">
+                <tr ng-repeat-start="group in tableData track by $index">
                     <td>{{group.id}}</td>
                     <td>{{group.app_id}}</td>
                     <td>{{group.state}}</td>
@@ -62,8 +62,7 @@
                     <td>{{group.packets}}</td>
                     <td>{{group.bytes}}</td>
                 </tr>
-                <tr class="ignore-width"
-                    ng-repeat-end ng-repeat-done>
+                <tr ng-repeat-end>
                     <td class="buckets" colspan="6"
                         ng-bind-html="group.buckets"></td>
                 </tr>
diff --git a/web/gui/src/main/webapp/app/view/host/host.html b/web/gui/src/main/webapp/app/view/host/host.html
index ad0e77e..0baeccd 100644
--- a/web/gui/src/main/webapp/app/view/host/host.html
+++ b/web/gui/src/main/webapp/app/view/host/host.html
@@ -9,7 +9,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -29,14 +29,13 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="6">
                         No Hosts found
                     </td>
                 </tr>
 
-                <tr ng-repeat="host in tableData"
-                    ng-repeat-done>
+                <tr ng-repeat="host in tableData track by $index">
                     <td class="table-icon">
                         <div icon icon-id="{{host._iconid_type}}"></div>
                     </td>
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.css b/web/gui/src/main/webapp/app/view/intent/intent.css
index 49bfc18..9f9923b 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.css
+++ b/web/gui/src/main/webapp/app/view/intent/intent.css
@@ -26,24 +26,24 @@
     width: 45px;
 }
 
+.light #ov-intent tr:nth-child(6n + 1),
 .light #ov-intent tr:nth-child(6n + 2),
-.light #ov-intent tr:nth-child(6n + 3),
-.light #ov-intent tr:nth-child(6n + 4) {
+.light #ov-intent tr:nth-child(6n + 3) {
     background-color: #eee;
 }
+.light #ov-intent tr:nth-child(6n + 4),
 .light #ov-intent tr:nth-child(6n + 5),
-.light #ov-intent tr:nth-child(6n + 6),
-.light #ov-intent tr:nth-child(6n + 1) {
+.light #ov-intent tr:nth-child(6n) {
     background-color: #ddd;
 }
+.dark #ov-intent tr:nth-child(6n + 1),
 .dark #ov-intent tr:nth-child(6n + 2),
-.dark #ov-intent tr:nth-child(6n + 3),
-.dark #ov-intent tr:nth-child(6n + 4) {
+.dark #ov-intent tr:nth-child(6n + 3) {
     background-color: #444;
 }
+.dark #ov-intent tr:nth-child(6n + 4),
 .dark #ov-intent tr:nth-child(6n + 5),
-.dark #ov-intent tr:nth-child(6n + 6),
-.dark #ov-intent tr:nth-child(6n + 1) {
+.dark #ov-intent tr:nth-child(6n) {
     background-color: #333;
 }
 
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.html b/web/gui/src/main/webapp/app/view/intent/intent.html
index e60e788..9c754fd 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.html
+++ b/web/gui/src/main/webapp/app/view/intent/intent.html
@@ -25,7 +25,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -44,13 +44,13 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="5">
                         No Intents found
                     </td>
                 </tr>
 
-                <tr ng-repeat-start="intent in tableData">
+                <tr ng-repeat-start="intent in tableData track by $index">
                     <td>{{intent.appId}}</td>
                     <td>{{intent.key}}</td>
                     <td>{{intent.type}}</td>
@@ -60,7 +60,7 @@
                 <tr>
                     <td class="resources" colspan="5">{{intent.resources}}</td>
                 </tr>
-                <tr ng-repeat-end ng-repeat-done>
+                <tr ng-repeat-end>
                     <td class="details" colspan="5">{{intent.details}}</td>
                 </tr>
             </table>
diff --git a/web/gui/src/main/webapp/app/view/link/link.html b/web/gui/src/main/webapp/app/view/link/link.html
index dd1f534..1431772 100644
--- a/web/gui/src/main/webapp/app/view/link/link.html
+++ b/web/gui/src/main/webapp/app/view/link/link.html
@@ -25,7 +25,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -45,14 +45,13 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="6">
                         No Links found
                     </td>
                 </tr>
 
-                <tr ng-repeat="link in tableData"
-                    ng-repeat-done>
+                <tr ng-repeat="link in tableData track by $index">
                     <td class="table-icon">
                         <div icon icon-id="{{link._iconid_state}}"></div>
                     </td>
diff --git a/web/gui/src/main/webapp/app/view/port/port.html b/web/gui/src/main/webapp/app/view/port/port.html
index 3e93eb3..5e48cbf 100644
--- a/web/gui/src/main/webapp/app/view/port/port.html
+++ b/web/gui/src/main/webapp/app/view/port/port.html
@@ -28,7 +28,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -50,14 +50,13 @@
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="8">
                         No Ports found
                     </td>
                 </tr>
 
-                <tr ng-repeat="port in tableData"
-                    ng-repeat-done>
+                <tr ng-repeat="port in tableData track by $index">
                     <td>{{port.id}}</td>
                     <td>{{port.pkt_rx}}</td>
                     <td>{{port.pkt_tx}}</td>
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.html b/web/gui/src/main/webapp/app/view/settings/settings.html
index 2c89984..c5d87ba 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.html
+++ b/web/gui/src/main/webapp/app/view/settings/settings.html
@@ -9,7 +9,7 @@
         </div>
     </div>
 
-    <div class="summary-list" onos-fixed-header>
+    <div class="summary-list" onos-table-resize>
 
         <div class="table-header"
              onos-sortable-header
@@ -17,26 +17,25 @@
              sort-callback="sortCallback(sortParams)">
             <table>
                 <tr>
-                    <td colId="component" sortable col-width="350px">Component </td>
+                    <td colId="component" sortable col-width="200px">Component </td>
                     <td colId="id" sortable>Property </td>
                     <td colId="type" sortable col-width="70px">Type </td>
                     <td colId="value" sortable>Value </td>
                     <td colId="defValue" sortable>Default </td>
-                    <td colId="desc" col-width="520px">Description </td>
+                    <td colId="desc" col-width="400px">Description </td>
                 </tr>
             </table>
         </div>
 
         <div class="table-body">
             <table>
-                <tr ng-hide="tableData.length" class="no-data ignore-width">
+                <tr ng-if="!tableData.length" class="no-data">
                     <td colspan="6">
                         No Settings found
                     </td>
                 </tr>
 
-                <tr ng-repeat="prop in tableData"
-                    ng-repeat-done>
+                <tr ng-repeat="prop in tableData track by $index">
                     <td>{{prop.component}}</td>
                     <td>{{prop.id}}</td>
                     <td>{{prop.type}}</td>
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 4c2e256..c76d9d5 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -135,7 +135,7 @@
 .topo-p h2 {
     padding: 0 4px;
     margin: 0;
-    word-break: break-all;
+    word-wrap: break-word;
     display: inline-block;
     width: 210px;
     vertical-align: middle;
@@ -150,7 +150,7 @@
 .topo-p h3 {
     padding: 0 4px;
     margin: 0;
-    word-break: break-all;
+    word-wrap: break-word;
     top: 20px;
     left: 50px;
 }
@@ -167,7 +167,7 @@
 }
 
 .topo-p td {
-    word-break: break-all;
+    word-wrap: break-word;
 }
 .topo-p td.label {
     font-style: italic;