Skip to content

Instantly share code, notes, and snippets.

@oli oli/dabblet.css
Last active Aug 29, 2015

Embed
What would you like to do?
Responsive table with th full-width but 2x td still tabular
/**
* Responsive table with th full-width but 2x td still tabular
*/
table {
width: 100%;
display: table;}
th, td {background: #eee;}
tr, th {
display: block;
}
th {
width: 100%;
}
td {
min-width: 4em;
width: 0.3%;
}
td + td {
width: 1%;
}
td[colspan="2"] {
width: 1%;
}
<table class="table__th-quarter-width table__first-td-quarter-width table__recruit-employment-data table__responsive-th"><tbody><tr><th rowspan="4" scope="row">初任給</th><td>大卒</td><td style="text-align: right;">195,550円</td></tr><tr><td>大学院修士卒</td><td style="text-align: right;">202,150円</td></tr><tr><td>大学院博士卒</td><td style="text-align: right;">208,750円</td></tr><tr><td colspan="2">(平成26年度実績・基本給)</td></tr><tr><th scope="row">諸手当</th><td colspan="2">世帯手当など</td></tr><tr><th scope="row">昇給</th><td colspan="2">年1回</td></tr><tr><th scope="row">賞与</th><td colspan="2">年2回(6月・12月) 入社初年度は12月のみ支給(平成26年度実績)</td></tr><tr><th scope="row">勤務時間</th><td colspan="2">1週平均37.5時間(フレックスタイム制度あり)</td></tr><tr><th scope="row">休日</th><td colspan="2">完全週休2日制 祝日、年末年始をあわせた年間休日数は約120日</td></tr><tr><th rowspan="4">休暇</th><td>年次有給休暇:</td><td>初年度12日 以降5年目20日まで漸増</td></tr><tr><td>クリエイティブ休暇:</td><td>各年度連続5日の休暇</td></tr><tr><td>リフレッシュ休暇:</td><td>10年、20年、30年勤続者に各連続10日</td></tr><tr><td>その他休暇:</td><td>結婚休暇、産前産後休暇、母性保護休暇、妻出産休暇、忌引休暇など</td></tr><tr><th rowspan="2">休職</th><td>育児休職:</td><td>子が満1歳6か月に達する日または1歳に達する日が属する年度末の翌月末(4月)まで、取得することができる。</td></tr><tr><td>介護休職:</td><td>通算して1年以内</td></tr><tr><th scope="row">人材育成</th><td colspan="2">採用後、新採用者研修を実施するほか、業務に応じた知識・能力伸張をはかるための研修や国内、海外派遣制度</td></tr><tr><th scope="row">勤務地</th><td colspan="2">東京都渋谷区神山町</td></tr><tr><th scope="row">その他</th><td colspan="2">社宅・寮はありません</td></tr><tr><th scope="row">お問い合わせ先</th><td colspan="2">株式会社NHKエンタープライズ 人事・総務 採用担当<br>〒150-0047 東京都渋谷区神山町4-14<br>電話 03-3481-7800<br>受付時間(月~金)10:00~12:00 13:00~17:00</td></tr></tbody></table>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.