8

HTML テーブルのヘッダーとフッターと本文の間に少しスペースを入れたいと思います。私は margin-top と margin-bottom がそれを行うだろうと思っていましたが、そうではありません。まだ font-weight: bold; ディレクティブが考慮されます。

私のHTML：

<table id="myTbl">
   <thead>
     <tr>
       <th>My Table Header</th>
     </tr>
   </thead>  
   <tbody>
    <tr>
      <td>My Body Content</td>
    </tr>
    </tbody>
   <tfoot>
     <tr>
       <th>My Table Footer</th>
     </tr>
   </tfoot>  
</table>

私のCSS：

#myTbl {
    font-weight: normal;
}

#myTbl thead {
    font-weight: bold;
    margin-bottom: 10px;
}

#myTbl tfoot {
    font-weight: bold;
    margin-top: 10px;
}

JSFiddle はこちらから入手できます。私はクロムを使用しています。

4

4 に答える 4

8

これが私の解決策です：

.common-table-body:before {
  line-height:1.5em;
  content:".";
  color:white;
  display:block;
}
于 2015-06-18T16:25:05.683 に答える