6

colgroups境界線を配置したいくつかの HTML テーブルがあります。隣接するグループ間にスペースを追加したいと思います。グループ間に空のセルを追加せずに CSS でこれを行う方法はありますか?

<table>
  <colgroup style="border:1px solid blue;"><col><col></colgroup>
  <colgroup style="border:1px solid blue;"><col><col></colgroup>
  <thead>
    <tr><th>Col A1</th><th>Col A2</th><th>Col B1</th><th>Col B2</th></tr>
  </thead>
 <tbody>
    <tr><td>A1</td><td>A2</td><td>B1</td><td>B2</td></tr>
 </tbody>
</table>

望ましい出力は次のようになります。

------------------- -------------------
| | コル A1 | コル A2 | | | コル B1 | コル B2 |
------------------ -------------------
| | A1 | A2 | | | B1 | B2 |
------------------- -------------------

編集

これまでのところ、css だけでこれを行う方法はないようです。誰かがこれを達成する答えを持っているかどうかを待ちますが、今のところ、スペーサーセル法を使用しています. 理想的ではありませんが、比較的きれいに見えるソリューションです。これが実際の例です：

http://jsfiddle.net/7ps6cuss/3/

4

2 に答える 2

3

margin＆padding仕事ではありません。

border-spacing<table>要素全体でのみ機能します。

唯一の方法は、2 つの別々のテーブルに分割することだと思います。

編集：

またはトリックborder-right/left: http://jsfiddle.net/q5sksufo/

*編集：タイプミスを修正

于 2014-08-14T23:06:06.247 に答える
-1

これを試して：

colgroup{
    margin:20px;
}
于 2014-08-14T22:28:10.200 に答える