数据标题包装在ngTable Angularjs中

Question

I'm working on AngularJS. I have created a table with ngTable and data-title attribute in the td like the following:

<table ng-table="orderDetails.tableParams" class="table table-hover" show-filter="true" >
    <tr ng-repeat="order in $data">
      <td  data-title="'Numéro commande'" sortable="'orderNumber'">
        {{order.orderNumber}}
      </td>
      <td data-title="'Ref restaurant'" sortable="'restaurantReference'">
        {{order.restaurantReference}}
      </td>
      <td data-title="'Ref client'" sortable="'customerReference'">
        {{order.customerReference}}
      </td>
      <td  data-title="'Montant total'" sortable="'totalAmount'">
        {{order.totalAmount}}
      </td>
  </tr>
</table>

My problem is that the text of each title is wrapping and I don't know how to get the titles in the same line, considering that I shouldn't write CSS in my HTML page.

Answer 1

I have managed this with bootstrap with did it automatically.I'd like now to change the color of the titles but I don't know how to control it.This is the javascript code:

     .controller('OrderDetailsCtrl', OrderDetailsCtrl);
      function OrderDetailsCtrl(orderDetailsService, $filter, NgTableParams, $scope , $templateCache) {
   var orderDetails = this;
    var data = [];
    orderDetails.getSummary = function (startdate, endate) {
    orderDetailsService.find(startdate, endate)
    .then(function(res) {
     orderDetails.summary = res.data;
      data = orderDetails.summary;
});
};
  orderDetails.getSummary($scope.$parent.filters.startdate,     $scope.$parent.filters.enddate);
       $scope.$on('filtering', function (event, filter) {
       orderDetails.getSummary(filter.startdate, filter.enddate);
});
  orderDetails.statusList=[{id: '', title: 'Tout'}, {id: 'Expirée',  title: 'Expirée'}, {id: 'Encaissée', title: 'Encaissée'}];
   orderDetails.tableParams = new NgTableParams({
   page: 1,  
   count: 5, 
    filter: {orderStatus:''},
     sorting: {orderNumber: 'asc'} 
}, {
total: data.length, 
counts:[5,10,15,20],
getData: function($defer, params) {
  // use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')(data, params.filter()) :
data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
data;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});

orderDetails.countPerPage = 1;
$templateCache.put('custom/header',
                  '<tr><td colspan=12>' +
                      $templateCache.get('custom/pager') +
                  '</td></tr>' +
                  $templateCache.get('ng-table/header.html'));
 }