Create a gist now

Instantly share code, notes, and snippets.

display : table のためのCSSサンプル
/*------------
SP
---------------------*/
#table,
#table,
#table .th,
#table .tr {
display: block;
width: 100%;
}
#table .tr {
border-bottom: 1px solid #aaa;
}
#table .th {
border-top: solid 1px #aaa;
text-align: left;
text-indent: 0.5em;
height: 28px;
line-height: 28px;
font-size: 14px;
color: #292929;
background-color: #eee;
}
#table .td {
display: block;
width: 100%;
text-align: left;
text-indent: 0.5em;
line-height: 28px;
font-size: 14px;
color: #292929;
}
#table {
margin-bottom: 60px;
}
#spec ul {
padding-left:18px;
}
#table ul li{
list-style-type: none;
}
.image_box{
position:relative;
}
.image_in_table{
display: block;
margin: 0 auto;
width: 50%;
height:auto;
}
td ul{
padding-left:0;
}
.image_table{
display: block;
width: 50%;
margin:0 auto 20px;
}
/*------------
PC
---------------------*/
#table {
margin: 0 auto 60px;
display: table;
width: 890px;
border-collapse: collapse;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
#table ul{
list-style-type: none;
}
.table_row {
display: table-row;
border-collapse: collapse;
border-bottom: 1px solid #aaa;
}
.th {
display: table-cell;
width: 258px;
height: 68px;
background-color: #eee;
text-align: left;
vertical-align: middle;
text-indent: 1em;
color: #292929;
font-size: 16px;
}
.td {
display: table-cell;
width: 760px;
height: 30px;
line-height: 30px;
vertical-align: middle;
box-sizing: border-box;
padding: 10px;
}
.colspan > div.td {
display: block;
width: 100%;
height: 35px;
vertical-align: middle;
line-height: 1em;
}
#table.outline .th{
display: table-cell;
width: 130px;
height: 68px;
background-color: #eee;
text-align: left;
text-indent: 1em;
color: #292929;
font-size: 16px;
}
#table.custom_table.td img{
width:25%;
position:relative;
height:110px;
}
.image_in_table{
position: absolute;
right: 0;
bottom: 18px;
width: 200px;
height:150px;
}
#talbe.custom_table .td.td_text_image {
width: 550px;
}
td ul {
padding:0;
}
td ul li{
list-style-type: none;
}
.image_table{
width:25%;
display: inline-block;
vertical-align: middle;
}
.td_text_image{
display: inline-block;
width: 540px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment