101 行
1.7 KiB
SCSS
101 行
1.7 KiB
SCSS
|
/* #Table
|
||
|
-------------------------------------------------------------------------- */
|
||
|
/*doc
|
||
|
---
|
||
|
title: table
|
||
|
name: table
|
||
|
categories: [component]
|
||
|
---
|
||
|
|
||
|
tableのレイアウト
|
||
|
|
||
|
```block
|
||
|
<div class="c-wrapper">
|
||
|
<table class="c-table c-table--fixed">
|
||
|
<tr>
|
||
|
<th class="u-percent50">th1</th>
|
||
|
<th>th2</th>
|
||
|
<th>th3</th>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>td1</td>
|
||
|
<td>td2</td>
|
||
|
<td>td3</td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
</div>
|
||
|
```
|
||
|
*/
|
||
|
.c-table {
|
||
|
width: 100%;
|
||
|
th,
|
||
|
td {
|
||
|
padding: 1em;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* セルを均等にします。`width`を1つだけ指定した場合は、残りのセルが均等になります。
|
||
|
*/
|
||
|
.c-table--fixed {
|
||
|
table-layout: fixed;
|
||
|
}
|
||
|
|
||
|
|
||
|
.c-form--tableA{
|
||
|
width: 100%;
|
||
|
background: #fff;
|
||
|
border-radius: 10px;
|
||
|
table-layout: fixed;
|
||
|
tr{
|
||
|
width: 970px;
|
||
|
overflow: hidden;
|
||
|
th,td{
|
||
|
text-align: left;
|
||
|
@include sp{
|
||
|
display: block;
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
&:last-child{
|
||
|
th{
|
||
|
@include pc{
|
||
|
border-bottom: none;
|
||
|
}
|
||
|
}
|
||
|
td{
|
||
|
border-bottom: none;
|
||
|
}
|
||
|
}
|
||
|
th{
|
||
|
padding: 10px 20px 10px 20px;
|
||
|
font-size: 1.5rem;
|
||
|
line-height: 1.8;
|
||
|
border-bottom: 1px solid #d2d2d2;
|
||
|
max-height: 100%;
|
||
|
@include pc{
|
||
|
min-width: 225px;
|
||
|
}
|
||
|
@include sp{
|
||
|
padding: 15px;
|
||
|
margin: 0 auto;
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
td{
|
||
|
padding: 13px 0;
|
||
|
width: calc(744/970*100%);
|
||
|
font-size: 1.5rem;
|
||
|
border-bottom: 1px solid #d2d2d2;
|
||
|
@include pc{
|
||
|
border-left: 1px solid #d2d2d2;
|
||
|
}
|
||
|
@include sp{
|
||
|
padding: 15px;
|
||
|
margin: 0 auto;
|
||
|
width: 100%;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|