#message-display{
    width: 100%;
    margin-top: 20px;
}
#message-display h2{
    font-size: 24px;
    text-align: center;
    padding: 10px 20px;
}
#message-display ul{
    padding: 10px 20px;
    margin-left: 20px;
}
/* 여러 정보를 설명한다. */
#message-display li{
    list-style: disc;
    font-size: 20px;
    padding: 5px;
}
#table-wrapper {   
    position: relative;    
    width: 100%;        
    padding: 10px;       
}
.table-container {
    /* 수정 */ 
    width: 100%;    
    flex:1;
    height: 100%;
    /* padding을 조금 작게 한다. */
    padding: 10px;
    border-radius: 10px;
    /* 스크롤바가 보이지 않도록 한다. */
    overflow-y: hidden;
    /* 스크롤바가 보이지 않게 한다. */
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background: #fff;
}
/* 스크롤바가 보이지 않게 한다. */
.table-container::-webkit-scrollbar{
    /* Chrome, Safari, Opera*/
    display: none;    
}
.table-container table{
    width: 100%;
    height: 100%;    
    /* 최소 높이를 정하지 않는다. */ 
    /* border가 겹치도록 한다.  */
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background: #fff;
}
.table-container th {
    padding: 5px;
    font-size: 22px; 
    color: #000;
    background: var(--site-color-1);
}
/* mobile에서는 글자 크기를 작게 한다. */
.table-container tbody td{
    padding: 10px 5px;
    word-break: break-all;
    font-size: 22px;   
    /* 아래 css를 설정해야 가로를 줄였을 때 테이블 칸이 줄어든다.*/ 
    max-width: 0;    
    overflow: hidden;  
    /* white-space:wrap은 없다. */
}

/* th:nth-child(1)는 name이다. */
#message-display .table-container th:nth-child(1) {
    /* 너비를 정한다. */
    width: 200px;
}

#message-display .table-container tbody td:nth-child(1) {    
    text-align: center;
}