マッハデザインのサイトへようこそ!
Webテクノロジー、アプリ、スマホ、起業などのメモブログ。

レスポンシブ対応tableのCSS/Sassジェネレーター [machdesign table css generator]

レスポンシブ対応tableのCSS/Sassジェネレーター [machdesign table css generator] 2019.07.09 TUE

table css ジェネレーターを作ってみました。
簡易的なレスポンシブ対応tableのCSSが作れます。
Class名、th、tdの背景色、文字色が変更でき、リアルタイムにコードに反映されます。

Class名
thの背景色:
thの文字色:
tdの背景色:
tdの文字色:
aaaaa aaaaa

CSS

   
.{{ className }} {
  width: 100%;
  border-collapse: collapse;
}
.{{ className }} th,
.{{ className }} td {
  text-align:left;
  padding:5px;
  box-sizing:border-box;
  border: 1px solid #ccc;
}
.{{ className }} th {
  width: 30%;
  background:{{ bgColor1 }};
  color:{{ color1 }}
}
.{{ className }} td {
  width: 70%;
  background:{{ bgColor2 }};
  color:{{ color2 }}    
}
@media only screen and (max-width:480px){
  .{{ className }} {
    border-top: 1px solid #ccc;
  }
  .{{ className }} th,
  .{{ className }} td {
    width: 100%;
    display: block;
    border-top: none;
  }
}

SASS

  
.{{ className }} {
  width: 100%;
  border-collapse: collapse;
  @media only screen and (max-width:480px){
    border-top: 1px solid #ccc;
  }
  th,
  td {
    text-align:left;
    padding:5px;
    box-sizing:border-box;
    border: 1px solid #ccc;
    @media only screen and (max-width:480px){
      width: 100%;
      display: block;
      border-top: none;
    }
  }
  th {
    width: 30%;
    background:{{ bgColor1 }};
    color:{{ color1 }}
  }
  td {
    width: 70%;
    background:{{ bgColor2 }};
    color:{{ color2 }}   
  }
}

関連記事

linear-gradient CSSグラデーションジェネレータ