Is there any theme or style for Bootstrap Table? - css

Question

I am using Bootstrap now for creating the front-end of the website that I am working on, and Bootstrap is very nice and powerful. However, the default style and theme for the HTML table is not good that much. So is there any style or theme for it?
I was searching about it and found Bootswatch website. They have very nice free themes for the Bootstrap, However, those themes don't change the style of the table.

Answer 1

Twitter bootstrap table can be styled and well designed. However to make your table look beautiful and style , you need create your own css
You can follow this example
On your HTML
<table class="responsive-table responsive-table-input-matrix">
<tr>
<th>Role</th>
<th>Add to Page</th>
<th>Configure</th>
<th>View</th>
<th>Change Permissions</th>
</tr>
<tr>
<td data-th="Role">Guest</td>
<td data-th="Add to Page"><input type="checkbox" /></td>
<td data-th="Configure"><input type="checkbox" /></td>
<td data-th="View"><input type="checkbox" /></td>
<td data-th="Change Permissions"><input type="checkbox" /></td>
</tr>
<tr>
<td data-th="Role">Noob</td>
<td data-th="Add to Page"><input type="checkbox" /></td>
<td data-th="Configure"><input type="checkbox" /></td>
<td data-th="View"><input type="checkbox" /></td>
<td data-th="Change Permissions"><input type="checkbox" /></td>
</tr>
<tr>
<td data-th="Role">Moderator</td>
<td data-th="Add to Page"><input type="checkbox" /></td>
<td data-th="Configure"><input type="checkbox" /></td>
<td data-th="View"><input type="checkbox" /></td>
<td data-th="Change Permissions"><input type="checkbox" /></td>
</tr>
<tr>
<td data-th="Role">Administrator</td>
<td data-th="Add to Page"><input type="checkbox" /></td>
<td data-th="Configure"><input type="checkbox" /></td>
<td data-th="View"><input type="checkbox" /></td>
<td data-th="Change Permissions"><input type="checkbox" /></td>
</tr>
<tr>
<td data-th="Role">Owner</td>
<td data-th="Add to Page"><input type="checkbox" /></td>
<td data-th="Configure"><input type="checkbox" /></td>
<td data-th="View"><input type="checkbox" /></td>
<td data-th="Change Permissions"><input type="checkbox" /></td>
</tr>
</table>
Create own CSS
#import "compass/css3";
// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)
$breakpoint-alpha: 480px; // adjust to your needs
.responsive-table-input-matrix {
margin: 1em 0;
// min-width: 300px; // adjust to your needs
width: 100%;
#media (min-width: $breakpoint-alpha) {
.responsive-table-input-matrix {
width: auto;
}
}
tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
td {
text-align: left;
#media (min-width: $breakpoint-alpha) {
text-align: center;
}
}
& td:first-of-type {
text-align: left;
}
}
th {
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
}
td {
display: block;
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
font-weight: bold;
// optional stuff to make it look nicer
width: 9em; // magic number :( adjust according to your own content
display: inline-block;
// end options
#media (min-width: $breakpoint-alpha) {
display: none;
}
}
}
& th:first-of-type {
text-align: left;
}
th, td {
text-align: center;
#media (min-width: $breakpoint-alpha) {
display: table-cell;
padding: .25em .5em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
// presentational styling
#import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.responsive-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
tr {
border-color: lighten(#34495E, 10%);
}
th, td {
margin: .5em 1em;
#media (min-width: $breakpoint-alpha) {
padding: 1em !important;
}
}
th, td:before {
color: #dd5;
}
}
Hope you can learn something from this coding. :)

Answer 2

Bootstrap provides basic styling for tables with the .table class. There are other classes that can be added for additional, modest styling.
W3Schools article on Bootstrap tables