2

私はこのようなテーブルを持っています：

/---+---+---+---+---+---\
| A | B | C | D | E | F |
\---+---+---+---+---+---/

AとBを視覚的に同じセルにあるように見せたいのですが、実際には同じセルにあるわけではありません。

これを行うには、AとBの間の境界線とパディングを0pxにする必要があります。

ただし、TDパディング（またはマージン！）の設定は私には機能しませんでした。それで、私が間違っていることについてのアイデアはありますか？

4

2 に答える 2

2

CSSを使用すると、これは非常に簡単になります。特に、1番目と2番目の列の両方を常に次のようにマージする場合はそうです。

:nth-child(2)このcssのすべての行の2番目のtdを :first-child選択しますこのcssのすべての行の最初のtdを選択します。次のように書くこともできます。:nth-child(1)

コード：

table
{
border-collapse:collapse;   
}

td
{
padding:4px;
border:1px solid black;   
}

tr td:first-child
{
padding-right:0;
margin-right:0;
border-right:0;
}

tr td:nth-child(n)
{
padding-left:0;
margin-left:0;
border-left:0;   
}

サンプルページ：

http://jsfiddle.net/h6DWg/1/

編集

OPは、境界線を折りたたまないように要求しました。境界線を折りたたまないようにする新しい例は、http：//jsfiddle.net/h6DWg/10/にあります。

于 2012-07-20T19:02:00.380 に答える
1

私には別の解決策があり、以前に提案したものよりも少し複雑ですが、解決策の適用方法に関してより柔軟性が得られると思います。

まず、以下に示すように、いくつかのcssコードが必要です。

td:not([colspan='2']) {
  /*your styling here*/
}
td[colspan='2'] {
  display: table-row;
}
td[colspan='2'] > div {
  display: table-cell;
  width: 50%;
  /*same styling here*/
}

最後に、html：

<table>
  <tbody>
    <tr>
      <td colspan='2'>
        <div id="cell-a"></div>
        <div id="cell-b"></div>
      </td>
      <td id="cell-c"></td>
      <!--and so on-->

基本的に、cssは、テーブル行のスタイルを最適化するために、テーブルの組み込み表示を模倣します。これにより、cssがすべての作業を実行できるようになり、さらに、必要な場所で2つのセルを2倍にするために、どこにでもcolspan='2'を配置できるようになります。これが機能することを確認するために、私はすでにローカルでテストしました。

編集： テーブル構造内で適切な間隔を空けるために、幅を追加しました：td [colspan = '2']> divの下に50％。

于 2012-07-20T19:36:42.460 に答える