Wie zentriert man Datentabelle Header und Daten im Bootstrap ohne CSS?

Question

Ich fange an, asp.net mvc4 und Bootstrap zu lernen, bis jetzt habe ich es geschafft, diese Datentabelle zu erstellen. Ich verwende den aktuellen Standard CSS der MVC4 Site.css. Ohne Änderung der CSS wie kann ich den Header (Name) und die Daten (A B C D) meiner Datentabelle? Wenn es nicht möglich ist, es in CSS zu bearbeiten? Ich habe nur ein Grundwissen in css

Hier ist mein Code meines JS

var globalPersonId = 1; 
var dataTablesOrderedList = ""; 
$(document).ready(function() { 

var dataTablesFirstBS = $('#dataTables-FIrstSample').DataTable({ 
    responsive: true, 
    processing: true, 
    info: true, 
    search: true, 
    stateSave: true, 
    order: [[1, "asc"]], 
    lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]], 
    ajax: { "url": "/BS/GetFirstDataTable" }, 
    columns: 
    [ 
     { data: "BSId", title: "", visible: false, searchable: false, sortable: false }, 
     { data: "Name", title: "Name", sClass: "alignCenter", sortable: false }, 
     { 
      data: "ActionMenu", title: "Sample Button", width: "100px", sAlign: "alignCenter", searchable: false, orderable: false, sClass: "alignCenter", 
      "mRender": function (data) { 
       return '<button type="button" class="btn btn-info btn-xs action" id="btnAddToCart_' + data + '"><i class="glyphicon glyphicon-cutlery glyphicon-fw action"></i></button>'; 
      } 
     } 
    ] 
}); 

// MyFirstBS(); 
function MyFirstBS() { 

    dataTablesOrderedList = $('#tblMyFirstBS').DataTable({ 
     responsive: true, 
     processing: true, 
     info: true, 
     retrieve: true, 
     destroy: true, 
     search: true, 
     stateSave: true, 
     lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]], 
     ajax: { 
      "url": "/BS/GetFirstDataTable", 
      "data": function (d) { 
       d.BSId = globalPersonId; 
      } 
     }, 
     columns: 
    [ 
     { data: "BSId", title: "", visible: false, searchable: false, sortable: false }, 
     { data: "Name", title: "Name", searchable: false, sortable: false } 
    ] 
    }); 
    } 
    }); 

Answer 1

CSS ist die beste/bevorzugte Art von Styling-HTML.

Für horizontale Textausrichtung, hat Bootstrap einige CSS-Klassen Helfer:

<p class="text-left">Left aligned text.</p> 
<p class="text-center">Center aligned text.</p> 
<p class="text-right">Right aligned text.</p> 

Quelle: http://getbootstrap.com/css/#type-alignment

Zur Ausrichtung Tabellenzelle können Sie Ihre eigene Helfer CSS-Klassen machen könnte und verwenden Sie diese:

.text-top { 
    vertical-align: top; 
} 
.text-middle { 
    vertical-align: middle; 
} 
.text-bottom { 
    vertical-align: bottom; 
} 

Alternativ können Sie Ihrer Datentabelle benutzerdefinierte CSS-Klassen hinzufügen:

<table class="example-class"> ... </table> 

Und dann verwenden, Ihre Zellen stylen:

.example-class th { 
    vertical-align: middle; 
} 
.example-class td { 
    vertical-align: top; 
}