.detail-roster {
    font-size: 0.2rem;
    color: #333;
}

.detail-roster p {
    text-align: center;
    height: 0.4rem;
    line-height: 0.4rem;
    display: inline-block;
   
}

.roster-1 {
    width: calc( 100% - 0.16rem );
}

.roster-2 {
    width: calc(( 100% - 0.06rem ) / 12 * 6 );
}

.roster-3 {
    width: calc(( 100% - 0.12rem ) / 12 * 4 );
}

.roster-4 {
    width: calc(( 100% - 0.18rem ) / 12 * 3 );
}

.roster-5 {
    width: calc(( 100% - 0.24rem ) / 5 );
}

.roster-6 {
    width: calc(( 100% - 0.30rem ) / 6 );
}

.roster-7 {
    width: calc(( 100% - 0.36rem ) / 7 );
}

.roster-8 {
    width: calc(( 100% - 0.42rem ) / 8 );
}

.roster-9 {
    width: calc(( 100% - 0.48rem ) / 9 );
}

.roster-10 {
    width: calc(( 100% - 0.54rem ) / 10 );
}

.roster-11 {
    width: calc(( 100% - 0.60rem ) / 11 );
}

.roster-12 {
    width: calc(( 100% - 0.66rem ) / 12 );
}