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%;
|
|
}
|
|
}
|
|
}
|
|
}
|