投稿者:

HTML　スマホサイト 「div」で「border-collapse」を有効にする

スマホ対応する際、表のレイアウトを記載するのに、table要素で組んでしまうとレシポンシブデザイン(cssによって表示の仕方を変える方法)でスマホ対応するとき、面倒ではありませんか？
ただ、divで構成して、「border-collapse」を指定しても、線が重複してくれず、2重になってしまう。。。

&color(red){table要素の時みたいに、border-collapseを摘要させて簡単に作りたい！！};

というアナタ！！
自分がサンプルとして作ってみたのでよかったら使ってみて下さい。
コツは、div要素をcssでtableのように設定することです。

 <div class="table">
      <div class="tr">
           <div class="td">test</div>
           <div class="td">test2</div>
      </div>
      <div class="tr">
           <div class="td">test3</div>
           <div class="td">test4</div>
      </div>
 </div>

 css部分
 .table{
       display:table;
       border-collapse:collapse;
 }

 .table .tr{
       display:table-row;
 }

 .table .tr .td{
       border:1px solid #2F4F4F;
       display:table-cell;
 }
 

これで大丈夫です！！