@import "var";

.@{prefixName}-table{
	width: 100%;
	overflow: auto;
  &.@{prefixName}-table--bordered{
		position: relative;
		&::after{
			.border(1px, @data-table-border-color);
		}
		.@{prefixName}-table__th,.@{prefixName}-table__td{
			border: 1px solid @data-table-border-color;
		}
		.@{prefixName}-table__header .@{prefixName}-table__th{
			border-bottom: none;
		}
	}

	&.@{prefixName}-table--header-fixed{
		.@{prefixName}-table__wrapper{
			height: 100%;
			display: flex;
			flex-direction: column;
		}
		.@{prefixName}-table__header{
			flex-grow: 0;
			flex-shrink: 0;
		}
		.@{prefixName}-table__body{
			flex-grow: 1;
			overflow: auto;
		}
	}


  &__colgroup{
    display: table-column-group;
  }
  &__col{
    display: table-column;
  }

  &__tr{
    display: table-row;
    height: 40px;
		width: 100%;
		border-top: 1px solid @data-table-border-color;
		&.@{prefixName}-table__header{
			border-top: none;
		}
  }
  &__th,&__td{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
		text-overflow: ellipsis;
	}
	&__th{
		background-color: @data-table-header-background-color;
	}

	&__box{
		display: table;
		width: 100%;
		box-sizing: border-box;
		border-collapse: collapse;
		border-spacing: 0;
		background-color: @data-table-background-color;
		font-size: 12px;
		color: @data-table-text-color;
		table-layout: fixed;
	}
	&__thead{
		width: 100%;
		display: table-header-group;
	}
	&__tbody{
		width: 100%;
		display: table-row-group;
	}


}