![レスポンシブ対応tableのCSS/Sassジェネレーター [machdesign table css generator]](/img/upimg/687c32ac-8e6c-4ad2-ab97-30e2829d43d5.webp)
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 }}
}
}
