Cocoon：レスポンシブ対応テーブル縦横見出し固定と行の余白調整

修正後のCSS

.sticky_table thead th {
  /* 縦スクロール時に固定する */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* tbody内のセルより手前に表示する */
  z-index: 1;
}
.sticky_table th:first-child {
  /* 横スクロール時に固定する */
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
}
.sticky_table thead th:first-child {
  /* ヘッダー行内の他のセルより手前に表示する */
  z-index: 3;
}

修正後のCSS

.sticky_table_wrapper {
  overflow: scroll;
  width: 100%;
  height: 60vh;
}
/* 見出しの背景色変更*/
table th, .scrollable-table th {
    background-color: rgba(132,23,47,1);
}
/*テーブル枠の色変更*/
table:not(.has-border-color) :where(th, td) {
 border: 1.5px solid #5c5b5b;　
}

追加後の完成したCSS

/* 見出しの背景色変更*/
table th, .scrollable-table th {
    background-color: rgba(132.23.47,1);
/* 項目は折り返さず表示*/
   white-space: nowrap;
   padding: 1.5em;
}
/*テーブル枠の色変更*/
table:not(.has-border-color) :where(th, td) {
 border: 1.5px solid #5c5b5b;　
}