ベーステンプレートを更新しました


目次[非表示]

  1. 1.管理Vr 20221221
    1. 1.1.common(ウェブサイト共通)の表の調整

管理Vr 20221221

common(ウェブサイト共通)の表の調整

firefoxやedgeでボーダーが消える現象回避に漏れがあり、修正しました。

リッチテキストでテーブルを作成する際、セルのプロパティでテキストの中央揃え+背景色をつけることで、上記の現象が起こっておりました。

修正前

/*--- 表 ---*/
.theme-fo-base {
  :is(.main-visual,.wrapper .contents,.foot ) {
    .component {
      &.richtext {
        table {
          border: none;
          &[align="center"] {
            margin: auto;
          }
          :is(thead,tbody,tr,th,td) {
            border-color: $border_color;
          }
          thead {
            tr {
              th {
                position: static; //FF,edgeでボーダー消える現象回避;
                p {
                  line-height: $base_line_height;
                  font-size: inherit;
                  & + p {
                    margin-top: 10px !important;
                  }
                }
              }
            }
          }
          tbody {
            tr {
              td {
                position: static; //FF,edgeでボーダー消える現象回避;
                p {
                  line-height: $base_line_height;
                  font-size: inherit;
                  & + p {
                    margin-top: 10px !important;
                  }
                }
                :is(ul,ol) {
                  margin: 0 0 0 25px;
                }
              }
            }
          }
        }
        .normal-table {
          &::after {
            content: "";
            display: table;
            clear: both;
          }
        }
        .table-with-row-header {
          &::after {
            content: "";
            display: table;
            clear: both;
          }
        }
        .table-with-two-headers {
          overflow: auto;
          &::after {
            content: "";
            display: table;
            clear: both;
          }
        }
      }
    }
  }
}

修正後

/*--- 表 ---*/
.theme-fo-base {
  :is(.main-visual,.wrapper .contents,.foot ) {
    .component {
      &.richtext {
        table {
          border: none;
          &[align="center"] {
            margin: auto;
          }
          :is(thead,tbody,tr,th,td) {
            border-color: $border_color;
          }
          :is(thead,tbody) {
            tr {
              :is(th,td) {
                background-clip: padding-box; //FF,edgeでボーダー消える現象回避;
                position: static; //FF,edgeでボーダー消える現象回避;
                p {
                  line-height: $base_line_height;
                  font-size: inherit;
                  & + p {
                    margin-top: 10px !important;
                  }
                }
                :is(ul,ol) {
                  margin-left: 25px;
                }
              }
            }
          }
        }
        .normal-table {
          &::after {
            content: "";
            display: table;
            clear: both;
          }
        }
        .table-with-row-header {
          &::after {
            content: "";
            display: table;
            clear: both;
          }
        }
        .table-with-two-headers {
          overflow: auto;
          &::after {
            content: "";
            display: table;
            clear: both;
          }
        }
      }
    }
  }
}


pagetop