style.css

.txt{
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0.5em;
    box-sizing: border-box;
    /* background: #f2f2f2; */
  }

  .button{
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    color: #333;
    font-size: 15px;
    font-weight: 700;
    background-color: #cccccc;
    appearance : none
  }

  th.input{
    /* ヘッダ背景塗りつぶし */
    background: #eee;
    /* 枠線を1本線指定 */
    border: solid 1px;
    width: 50%;
    height: 100%;
  }

  td.input{
   /* 枠線を1本線指定 */
    border: solid 1px;
    width: 50%;
    height: 100%;
    text-align: center;
    vertical-align: top;
  }

  table.input{
    /* 枠線を1本線指定 */
    border-collapse:  collapse;
    white-space: nowrap;
    table-layout: fixed;
    width: 300;
    height: 100%;
  }

  .input{
    margin: 0 0 10px;
    font-size: 15px;
  }

  th.main{
    /* ヘッダ背景塗りつぶし */
    background: #eee;
    /* 枠線を1本線指定 */
    border: solid 1px;
    width: 100%;
    height: 100%;
    
  }

  td.main{
   /* 枠線を1本線指定 */
    border: solid 1px;
    width: 100%;
    height: 100%;
    text-align: center; 
    vertical-align: top;
  }

  table.main{
   /* 枠線を1本線指定 */
    border: solid 1px;
    border-collapse:  collapse;
    white-space: nowrap;
    table-layout: fixed;
    width: 300;
    height: 100%;
  }

  .main{
    margin: 0 10px 10px;
    font-size: 12px;
  }
  
  th.sub{
    /* ヘッダ背景塗りつぶし */
    
    /* 枠線を1本線指定 */
    border: solid 1px;
    width: 100%;
    height: 100%;
  }

  td.sub{
   /* 枠線を1本線指定 */
    border: solid 1px;
    width: 100%;
    height: 100%;
    text-align: center; 
    vertical-align: top;
  }

  table.sub{
   /* 枠線を1本線指定 */
    border: solid 1px;
    width: 300;
    height: 100%;
    background-color: #cccccc;
    
  }

  .sub{
    margin: 0 10px 10px;
    
    background: #eee;
  }