Ivan - Table Component - Add object mapping for tables [skip ci]
This commit is contained in:
ivan
parent
997abebf8c
commit
307946ff22
|
|
@ -13,45 +13,67 @@ class DashboardListTicketsPage extends React.Component {
|
|||
|
||||
getTableHeaders() {
|
||||
return [
|
||||
'Number',
|
||||
'Title',
|
||||
'Department',
|
||||
'Date'
|
||||
{
|
||||
key: 'number',
|
||||
value: 'Number',
|
||||
className: 'dashboard-ticket-list__number col-md-1'
|
||||
},
|
||||
{
|
||||
key: 'title',
|
||||
value: 'Title',
|
||||
className: 'dashboard-ticket-list__title col-md-7'
|
||||
},
|
||||
{
|
||||
key: 'department',
|
||||
value: 'Department',
|
||||
className: 'dashboard-ticket-list__department col-md-2'
|
||||
},
|
||||
{
|
||||
key: 'date',
|
||||
value: 'Date',
|
||||
className: 'dashboard-ticket-list__date col-md-2'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
getTableRows() {
|
||||
return [
|
||||
[
|
||||
'#445441',
|
||||
'Problem with installation',
|
||||
'Environment Setup',
|
||||
'15 Apr 2016'
|
||||
],
|
||||
[
|
||||
'#445441',
|
||||
'Problem with installation',
|
||||
'Environment Setup',
|
||||
'15 Apr 2016'
|
||||
],
|
||||
[
|
||||
'#445441',
|
||||
'Problem with installation',
|
||||
'Environment Setup',
|
||||
'15 Apr 2016'
|
||||
],
|
||||
[
|
||||
'#445441',
|
||||
'Problem with installation',
|
||||
'Environment Setup',
|
||||
'15 Apr 2016'
|
||||
],
|
||||
[
|
||||
'#445441',
|
||||
'Problem with installation',
|
||||
'Environment Setup',
|
||||
'15 Apr 2016'
|
||||
]
|
||||
{
|
||||
number: '#445441',
|
||||
title: 'Problem with installation',
|
||||
department: 'Environment Setup',
|
||||
date: '15 Apr 2016'
|
||||
},
|
||||
{
|
||||
number: '#445441',
|
||||
title: 'Problem with installation',
|
||||
department: 'Environment Setup',
|
||||
date: '15 Apr 2016'
|
||||
},
|
||||
{
|
||||
number: '#445441',
|
||||
title: 'Problem with installation',
|
||||
department: 'Environment Setup',
|
||||
date: '15 Apr 2016'
|
||||
},
|
||||
{
|
||||
number: '#445441',
|
||||
title: 'Problem with installation',
|
||||
department: 'Environment Setup',
|
||||
date: '15 Apr 2016'
|
||||
},
|
||||
{
|
||||
number: '#445441',
|
||||
title: 'Problem with installation',
|
||||
department: 'Environment Setup',
|
||||
date: '15 Apr 2016'
|
||||
},
|
||||
{
|
||||
number: '#445441',
|
||||
title: 'Problem with installation',
|
||||
department: 'Environment Setup',
|
||||
date: '15 Apr 2016'
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
.dashboard-ticket-list {
|
||||
&__number {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__department {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__date {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
class Table extends React.Component {
|
||||
static propTypes = {
|
||||
headers: React.PropTypes.arrayOf(React.PropTypes.string),
|
||||
rows: React.PropTypes.arrayOf(React.PropTypes.arrayOf(React.PropTypes.node)),
|
||||
headers: React.PropTypes.arrayOf(React.PropTypes.shape({
|
||||
key: React.PropTypes.string,
|
||||
value: React.PropTypes.string,
|
||||
className: React.PropTypes.string
|
||||
})),
|
||||
rows: React.PropTypes.arrayOf(React.PropTypes.objectOf(React.PropTypes.node)),
|
||||
type: React.PropTypes.oneOf(['default'])
|
||||
};
|
||||
|
||||
|
|
@ -13,28 +18,50 @@ class Table extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<table className="table">
|
||||
<tr className="table__header">
|
||||
{this.props.headers.map(this.renderHeaderColumn.bind(this))}
|
||||
</tr>
|
||||
{this.props.rows.map(this.renderRow.bind(this))}
|
||||
<table className="table table-responsive">
|
||||
<thead>
|
||||
<tr className="table__header">
|
||||
{this.props.headers.map(this.renderHeaderColumn.bind(this))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{this.props.rows.map(this.renderRow.bind(this))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
renderHeaderColumn(header) {
|
||||
let classes = {
|
||||
'table__header-column': true,
|
||||
[header.className]: (header.className)
|
||||
};
|
||||
|
||||
return (
|
||||
<th className="table__header-column">{header}</th>
|
||||
<th className={classNames(classes)} key={header.key}>{header.value}</th>
|
||||
);
|
||||
}
|
||||
|
||||
renderRow(row) {
|
||||
renderRow(row, index) {
|
||||
let headersKeys = this.props.headers.map(header => header.key);
|
||||
|
||||
return (
|
||||
<tr className="table__row">
|
||||
{row.map((cell) =><td className="table__cell">{cell}</td>)}
|
||||
<tr className="table__row" key={index}>
|
||||
{headersKeys.map(this.renderCell.bind(this, row))}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
renderCell(row, key, index) {
|
||||
let classes = {
|
||||
'table__cell': true,
|
||||
[this.props.headers[index].className]: (this.props.headers[index].className)
|
||||
};
|
||||
|
||||
return (
|
||||
<td className={classNames(classes)} key={key}>{row[key]}</td>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Table;
|
||||
|
|
@ -9,7 +9,15 @@
|
|||
}
|
||||
|
||||
&__header-column {
|
||||
padding: 10px;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 4px
|
||||
}
|
||||
}
|
||||
|
||||
&__row {
|
||||
|
|
@ -25,6 +33,6 @@
|
|||
}
|
||||
|
||||
&__cell {
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,53 @@
|
|||
/*!
|
||||
* Bootstrap v3.3.7 (http://getbootstrap.com)
|
||||
* Copyright 2011-2016 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
/*!
|
||||
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=95955b93b458c15deb17e935e7374a2f)
|
||||
* Config saved to config.json and https://gist.github.com/95955b93b458c15deb17e935e7374a2f
|
||||
*/
|
||||
/*!
|
||||
* Bootstrap v3.3.7 (http://getbootstrap.com)
|
||||
* Copyright 2011-2016 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
|
|
@ -148,6 +197,78 @@ td,
|
|||
th {
|
||||
padding: 0;
|
||||
}
|
||||
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
|
||||
@media print {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
.btn > .caret,
|
||||
.dropup > .btn > .caret {
|
||||
border-top-color: #000 !important;
|
||||
}
|
||||
.label {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.table {
|
||||
border-collapse: collapse !important;
|
||||
}
|
||||
.table td,
|
||||
.table th {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
.table-bordered th,
|
||||
.table-bordered td {
|
||||
border: 1px solid #ddd !important;
|
||||
}
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
|
|
@ -188,7 +309,6 @@ a:focus {
|
|||
text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
|
@ -250,6 +370,416 @@ hr {
|
|||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-family: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.1;
|
||||
color: inherit;
|
||||
}
|
||||
h1 small,
|
||||
h2 small,
|
||||
h3 small,
|
||||
h4 small,
|
||||
h5 small,
|
||||
h6 small,
|
||||
.h1 small,
|
||||
.h2 small,
|
||||
.h3 small,
|
||||
.h4 small,
|
||||
.h5 small,
|
||||
.h6 small,
|
||||
h1 .small,
|
||||
h2 .small,
|
||||
h3 .small,
|
||||
h4 .small,
|
||||
h5 .small,
|
||||
h6 .small,
|
||||
.h1 .small,
|
||||
.h2 .small,
|
||||
.h3 .small,
|
||||
.h4 .small,
|
||||
.h5 .small,
|
||||
.h6 .small {
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: #777777;
|
||||
}
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 small,
|
||||
.h1 small,
|
||||
h2 small,
|
||||
.h2 small,
|
||||
h3 small,
|
||||
.h3 small,
|
||||
h1 .small,
|
||||
.h1 .small,
|
||||
h2 .small,
|
||||
.h2 .small,
|
||||
h3 .small,
|
||||
.h3 .small {
|
||||
font-size: 65%;
|
||||
}
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h4 small,
|
||||
.h4 small,
|
||||
h5 small,
|
||||
.h5 small,
|
||||
h6 small,
|
||||
.h6 small,
|
||||
h4 .small,
|
||||
.h4 .small,
|
||||
h5 .small,
|
||||
.h5 .small,
|
||||
h6 .small,
|
||||
.h6 .small {
|
||||
font-size: 75%;
|
||||
}
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.lead {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.lead {
|
||||
font-size: 21px;
|
||||
}
|
||||
}
|
||||
small,
|
||||
.small {
|
||||
font-size: 85%;
|
||||
}
|
||||
mark,
|
||||
.mark {
|
||||
background-color: #fcf8e3;
|
||||
padding: .2em;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
.text-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.text-muted {
|
||||
color: #777777;
|
||||
}
|
||||
.text-primary {
|
||||
color: #337ab7;
|
||||
}
|
||||
a.text-primary:hover,
|
||||
a.text-primary:focus {
|
||||
color: #286090;
|
||||
}
|
||||
.text-success {
|
||||
color: #3c763d;
|
||||
}
|
||||
a.text-success:hover,
|
||||
a.text-success:focus {
|
||||
color: #2b542c;
|
||||
}
|
||||
.text-info {
|
||||
color: #31708f;
|
||||
}
|
||||
a.text-info:hover,
|
||||
a.text-info:focus {
|
||||
color: #245269;
|
||||
}
|
||||
.text-warning {
|
||||
color: #8a6d3b;
|
||||
}
|
||||
a.text-warning:hover,
|
||||
a.text-warning:focus {
|
||||
color: #66512c;
|
||||
}
|
||||
.text-danger {
|
||||
color: #a94442;
|
||||
}
|
||||
a.text-danger:hover,
|
||||
a.text-danger:focus {
|
||||
color: #843534;
|
||||
}
|
||||
.bg-primary {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
a.bg-primary:hover,
|
||||
a.bg-primary:focus {
|
||||
background-color: #286090;
|
||||
}
|
||||
.bg-success {
|
||||
background-color: #dff0d8;
|
||||
}
|
||||
a.bg-success:hover,
|
||||
a.bg-success:focus {
|
||||
background-color: #c1e2b3;
|
||||
}
|
||||
.bg-info {
|
||||
background-color: #d9edf7;
|
||||
}
|
||||
a.bg-info:hover,
|
||||
a.bg-info:focus {
|
||||
background-color: #afd9ee;
|
||||
}
|
||||
.bg-warning {
|
||||
background-color: #fcf8e3;
|
||||
}
|
||||
a.bg-warning:hover,
|
||||
a.bg-warning:focus {
|
||||
background-color: #f7ecb5;
|
||||
}
|
||||
.bg-danger {
|
||||
background-color: #f2dede;
|
||||
}
|
||||
a.bg-danger:hover,
|
||||
a.bg-danger:focus {
|
||||
background-color: #e4b9b9;
|
||||
}
|
||||
.page-header {
|
||||
padding-bottom: 9px;
|
||||
margin: 40px 0 20px;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ol ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.list-inline {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
margin-left: -5px;
|
||||
}
|
||||
.list-inline > li {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
dt,
|
||||
dd {
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.dl-horizontal dt {
|
||||
float: left;
|
||||
width: 160px;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dl-horizontal dd {
|
||||
margin-left: 180px;
|
||||
}
|
||||
}
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted #777777;
|
||||
}
|
||||
.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
blockquote {
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
font-size: 17.5px;
|
||||
border-left: 5px solid #eeeeee;
|
||||
}
|
||||
blockquote p:last-child,
|
||||
blockquote ul:last-child,
|
||||
blockquote ol:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
blockquote footer,
|
||||
blockquote small,
|
||||
blockquote .small {
|
||||
display: block;
|
||||
font-size: 80%;
|
||||
line-height: 1.42857143;
|
||||
color: #777777;
|
||||
}
|
||||
blockquote footer:before,
|
||||
blockquote small:before,
|
||||
blockquote .small:before {
|
||||
content: '\2014 \00A0';
|
||||
}
|
||||
.blockquote-reverse,
|
||||
blockquote.pull-right {
|
||||
padding-right: 15px;
|
||||
padding-left: 0;
|
||||
border-right: 5px solid #eeeeee;
|
||||
border-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.blockquote-reverse footer:before,
|
||||
blockquote.pull-right footer:before,
|
||||
.blockquote-reverse small:before,
|
||||
blockquote.pull-right small:before,
|
||||
.blockquote-reverse .small:before,
|
||||
blockquote.pull-right .small:before {
|
||||
content: '';
|
||||
}
|
||||
.blockquote-reverse footer:after,
|
||||
blockquote.pull-right footer:after,
|
||||
.blockquote-reverse small:after,
|
||||
blockquote.pull-right small:after,
|
||||
.blockquote-reverse .small:after,
|
||||
blockquote.pull-right .small:after {
|
||||
content: '\00A0 \2014';
|
||||
}
|
||||
address {
|
||||
margin-bottom: 20px;
|
||||
font-style: normal;
|
||||
line-height: 1.42857143;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
}
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
font-size: 90%;
|
||||
color: #c7254e;
|
||||
background-color: #f9f2f4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
kbd {
|
||||
padding: 2px 4px;
|
||||
font-size: 90%;
|
||||
color: #ffffff;
|
||||
background-color: #333333;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
kbd kbd {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
font-weight: bold;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.42857143;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
color: #333333;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
pre code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
white-space: pre-wrap;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.pre-scrollable {
|
||||
max-height: 340px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
|
@ -917,8 +1447,250 @@ hr {
|
|||
margin-left: 0%;
|
||||
}
|
||||
}
|
||||
table {
|
||||
background-color: transparent;
|
||||
}
|
||||
caption {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
color: #777777;
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table > thead > tr > th,
|
||||
.table > tbody > tr > th,
|
||||
.table > tfoot > tr > th,
|
||||
.table > thead > tr > td,
|
||||
.table > tbody > tr > td,
|
||||
.table > tfoot > tr > td {
|
||||
padding: 8px;
|
||||
line-height: 1.42857143;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
.table > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid #dddddd;
|
||||
}
|
||||
.table > caption + thead > tr:first-child > th,
|
||||
.table > colgroup + thead > tr:first-child > th,
|
||||
.table > thead:first-child > tr:first-child > th,
|
||||
.table > caption + thead > tr:first-child > td,
|
||||
.table > colgroup + thead > tr:first-child > td,
|
||||
.table > thead:first-child > tr:first-child > td {
|
||||
border-top: 0;
|
||||
}
|
||||
.table > tbody + tbody {
|
||||
border-top: 2px solid #dddddd;
|
||||
}
|
||||
.table .table {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.table-condensed > thead > tr > th,
|
||||
.table-condensed > tbody > tr > th,
|
||||
.table-condensed > tfoot > tr > th,
|
||||
.table-condensed > thead > tr > td,
|
||||
.table-condensed > tbody > tr > td,
|
||||
.table-condensed > tfoot > tr > td {
|
||||
padding: 5px;
|
||||
}
|
||||
.table-bordered {
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
.table-bordered > thead > tr > th,
|
||||
.table-bordered > tbody > tr > th,
|
||||
.table-bordered > tfoot > tr > th,
|
||||
.table-bordered > thead > tr > td,
|
||||
.table-bordered > tbody > tr > td,
|
||||
.table-bordered > tfoot > tr > td {
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
.table-bordered > thead > tr > th,
|
||||
.table-bordered > thead > tr > td {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
.table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.table-hover > tbody > tr:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
table col[class*="col-"] {
|
||||
position: static;
|
||||
float: none;
|
||||
display: table-column;
|
||||
}
|
||||
table td[class*="col-"],
|
||||
table th[class*="col-"] {
|
||||
position: static;
|
||||
float: none;
|
||||
display: table-cell;
|
||||
}
|
||||
.table > thead > tr > td.active,
|
||||
.table > tbody > tr > td.active,
|
||||
.table > tfoot > tr > td.active,
|
||||
.table > thead > tr > th.active,
|
||||
.table > tbody > tr > th.active,
|
||||
.table > tfoot > tr > th.active,
|
||||
.table > thead > tr.active > td,
|
||||
.table > tbody > tr.active > td,
|
||||
.table > tfoot > tr.active > td,
|
||||
.table > thead > tr.active > th,
|
||||
.table > tbody > tr.active > th,
|
||||
.table > tfoot > tr.active > th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.table-hover > tbody > tr > td.active:hover,
|
||||
.table-hover > tbody > tr > th.active:hover,
|
||||
.table-hover > tbody > tr.active:hover > td,
|
||||
.table-hover > tbody > tr:hover > .active,
|
||||
.table-hover > tbody > tr.active:hover > th {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
.table > thead > tr > td.success,
|
||||
.table > tbody > tr > td.success,
|
||||
.table > tfoot > tr > td.success,
|
||||
.table > thead > tr > th.success,
|
||||
.table > tbody > tr > th.success,
|
||||
.table > tfoot > tr > th.success,
|
||||
.table > thead > tr.success > td,
|
||||
.table > tbody > tr.success > td,
|
||||
.table > tfoot > tr.success > td,
|
||||
.table > thead > tr.success > th,
|
||||
.table > tbody > tr.success > th,
|
||||
.table > tfoot > tr.success > th {
|
||||
background-color: #dff0d8;
|
||||
}
|
||||
.table-hover > tbody > tr > td.success:hover,
|
||||
.table-hover > tbody > tr > th.success:hover,
|
||||
.table-hover > tbody > tr.success:hover > td,
|
||||
.table-hover > tbody > tr:hover > .success,
|
||||
.table-hover > tbody > tr.success:hover > th {
|
||||
background-color: #d0e9c6;
|
||||
}
|
||||
.table > thead > tr > td.info,
|
||||
.table > tbody > tr > td.info,
|
||||
.table > tfoot > tr > td.info,
|
||||
.table > thead > tr > th.info,
|
||||
.table > tbody > tr > th.info,
|
||||
.table > tfoot > tr > th.info,
|
||||
.table > thead > tr.info > td,
|
||||
.table > tbody > tr.info > td,
|
||||
.table > tfoot > tr.info > td,
|
||||
.table > thead > tr.info > th,
|
||||
.table > tbody > tr.info > th,
|
||||
.table > tfoot > tr.info > th {
|
||||
background-color: #d9edf7;
|
||||
}
|
||||
.table-hover > tbody > tr > td.info:hover,
|
||||
.table-hover > tbody > tr > th.info:hover,
|
||||
.table-hover > tbody > tr.info:hover > td,
|
||||
.table-hover > tbody > tr:hover > .info,
|
||||
.table-hover > tbody > tr.info:hover > th {
|
||||
background-color: #c4e3f3;
|
||||
}
|
||||
.table > thead > tr > td.warning,
|
||||
.table > tbody > tr > td.warning,
|
||||
.table > tfoot > tr > td.warning,
|
||||
.table > thead > tr > th.warning,
|
||||
.table > tbody > tr > th.warning,
|
||||
.table > tfoot > tr > th.warning,
|
||||
.table > thead > tr.warning > td,
|
||||
.table > tbody > tr.warning > td,
|
||||
.table > tfoot > tr.warning > td,
|
||||
.table > thead > tr.warning > th,
|
||||
.table > tbody > tr.warning > th,
|
||||
.table > tfoot > tr.warning > th {
|
||||
background-color: #fcf8e3;
|
||||
}
|
||||
.table-hover > tbody > tr > td.warning:hover,
|
||||
.table-hover > tbody > tr > th.warning:hover,
|
||||
.table-hover > tbody > tr.warning:hover > td,
|
||||
.table-hover > tbody > tr:hover > .warning,
|
||||
.table-hover > tbody > tr.warning:hover > th {
|
||||
background-color: #faf2cc;
|
||||
}
|
||||
.table > thead > tr > td.danger,
|
||||
.table > tbody > tr > td.danger,
|
||||
.table > tfoot > tr > td.danger,
|
||||
.table > thead > tr > th.danger,
|
||||
.table > tbody > tr > th.danger,
|
||||
.table > tfoot > tr > th.danger,
|
||||
.table > thead > tr.danger > td,
|
||||
.table > tbody > tr.danger > td,
|
||||
.table > tfoot > tr.danger > td,
|
||||
.table > thead > tr.danger > th,
|
||||
.table > tbody > tr.danger > th,
|
||||
.table > tfoot > tr.danger > th {
|
||||
background-color: #f2dede;
|
||||
}
|
||||
.table-hover > tbody > tr > td.danger:hover,
|
||||
.table-hover > tbody > tr > th.danger:hover,
|
||||
.table-hover > tbody > tr.danger:hover > td,
|
||||
.table-hover > tbody > tr:hover > .danger,
|
||||
.table-hover > tbody > tr.danger:hover > th {
|
||||
background-color: #ebcccc;
|
||||
}
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
min-height: 0.01%;
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
overflow-y: hidden;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
.table-responsive > .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.table-responsive > .table > thead > tr > th,
|
||||
.table-responsive > .table > tbody > tr > th,
|
||||
.table-responsive > .table > tfoot > tr > th,
|
||||
.table-responsive > .table > thead > tr > td,
|
||||
.table-responsive > .table > tbody > tr > td,
|
||||
.table-responsive > .table > tfoot > tr > td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.table-responsive > .table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
.table-responsive > .table-bordered > thead > tr > th:first-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > th:first-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > th:first-child,
|
||||
.table-responsive > .table-bordered > thead > tr > td:first-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > td:first-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > td:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
.table-responsive > .table-bordered > thead > tr > th:last-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > th:last-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > th:last-child,
|
||||
.table-responsive > .table-bordered > thead > tr > td:last-child,
|
||||
.table-responsive > .table-bordered > tbody > tr > td:last-child,
|
||||
.table-responsive > .table-bordered > tfoot > tr > td:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
.table-responsive > .table-bordered > tbody > tr:last-child > th,
|
||||
.table-responsive > .table-bordered > tfoot > tr:last-child > th,
|
||||
.table-responsive > .table-bordered > tbody > tr:last-child > td,
|
||||
.table-responsive > .table-bordered > tfoot > tr:last-child > td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after,
|
||||
.dl-horizontal dd:before,
|
||||
.dl-horizontal dd:after,
|
||||
.container:before,
|
||||
.container:after,
|
||||
.container-fluid:before,
|
||||
|
|
@ -929,6 +1701,7 @@ hr {
|
|||
display: table;
|
||||
}
|
||||
.clearfix:after,
|
||||
.dl-horizontal dd:after,
|
||||
.container:after,
|
||||
.container-fluid:after,
|
||||
.row:after {
|
||||
|
|
|
|||
Loading…
Reference in New Issue