ホーム » 個人掲示板 » メモ20181012
My Google+

メモ20181012

  • 技術三昧@2018-10-12 19:30:34

スポンサーリンク

<style>
table {
border-spacing: 0;
text-align: left;
line-height: 1.5rem;
border-collapse: collapse;
}
tr td:first-child {

}
th {
border: 1px solid #CCC;
text-align: center;
}
td {
padding: 0.25rem 0.5rem;
vertical-align: top;
border: 1px solid #CCC;
border-bottom: 0px solid #CCC;
vertical-align: center;
}
.EvenRow--left {
border-top: 0;
border-right: 0;
text-align: right;
font-size: 70%;
}
.EvenRow--left span {
position: absolute;
margin-right: -1rem;
margin-top: -0.75rem;
z-index: 1;
background: #FFF;
}
.EmptyCell--left {
border-left: 0;
}

.OddRow--right {
border-top: 0;
border-left: 0;
text-align: left;
font-size: 70%;
}
.EvenRow--right span {
position: absolute;
margin-left: -1rem;
margin-top: -0.75rem;
z-index: 1;
background: #FFF;
}
.EmptyCell--right {
border-righ: 0;
}

</style>

<table>
<thead>
<tr>
<th colspan="2">西暦</th>
<th>満年齢</th>
<th>数え年</th>
<th colspan="2">旧暦</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">2000.12.12</td>
<td rowspan="2">0</td>
<td>1</td>
<td colspan="2">2000.10.29</td>
</tr>
<tr>
<td class="EvenRow--left"><span>2001.2.15</span></td>
<td class="EmptyCell--left"></td>
<td rowspan="2">2</td>
<td colspan="2">2001.1.1</td>
</tr>
<tr>
<td colspan="2">2001.12.12</td>
<td rowspan="2">1</td>
<td class="EmptyCell--right"></td>
<td class="OddRow--right"><span>2001.10.31</span></td>
</tr>
<tr>
<td class="EvenRow--left"><span>2002.2.14</span></td>
<td class="EmptyCell--left"></td>
<td rowspan="2">3</td>
<td colspan="2">2002.1.1</td>
</tr>
<tr>
<td colspan="2">2002.12.12</td>
<td>2</td>
<td colspan="2">2002.10.30</td>
</tr>
</tbody>
</table>

0人

◎技術三昧掲示板で掲載した情報(リンク・リンク先を含む)に関して、掲示板管理者が確認や保証を行うことは一切ありません。
すべて利用者のモラルに委ねられおり、掲示板から張られたリンクに関するトラブルが生じても管理者側は免責とさせていただきます。

閉じる