ConneCre

connelog

RSS
ConneCre (2009.06.08)

tableのborder指定について

tableのborder指定を行ったところ、firefoxで左に1pxずれることに気付きました。
調べていると、対処法が載っていたのでメモ。

元の（firefoxで1pxずれる）CSSとHTMLはこのように記載しておりました。

  1. table{
  2.     border-collapse: collapse;
  3.     border-top: #000 1px solid ;
  4.     border-left: #000 1px solid ;
  5. }
  6.  
  7. table th, table td{
  8.     border-right: #000 1px solid ;
  9.     border-bottom: #000 1px solid ;
  10. }
  11.  
  12. <table>
  13.     <tr>
  14.         <th>～</th>
  15.         <th>～</th>
  16.         <th>～</th>
  17.     </tr>
  18.     <tr>
  19.         <td>～</td>
  20.         <th>～</td>
  21.         <td>～</td>
  22.     </tr>
  23. </table>

修正したHTMLは以下の通りです。

■CSS

tableにborder-collapse: separate;への変更及び、border-rightとborder-bottomの指定。th・tdにborder-topとborder-leftの指定。

■HTML

IEの表示用にHTMLのtableタグにcellspacing="0"の追加を行っております。

  1. table{
  2.     border-collapse: separate;
  3.     border-right: #000 1px solid ;
  4.     border-bottom: #000 1px solid ;
  5. }
  6.  
  7. table th, table td{
  8.     border-top: #000 1px solid ;
  9.     border-left: #000 1px solid ;
  10. }
  11.  
  12. <table cellspacing="0">
  13.     <tr>
  14.         <th>～</th>
  15.         <th>～</th>
  16.         <th>～</th>
  17.     </tr>
  18.     <tr>
  19.         <td>～</td>
  20.         <th>～</td>
  21.         <td>～</td>
  22.     </tr>
  23. </table>

■参考URL

border-collapse[A Day in the Life]

next page Firefoxでスクロールバーの有無によるセンターの位置のずれ
previous page カスタムフィールドを利用したポッドキャスト

PAGE TOP