table-cellでhtmlのボタンを作成したいがクリック時のpadding操作が他のcellにも影響してしまう。

Question

実現したいこと

入る文字列に対して柔軟に対応できるボタンを作りたいのですが、なかなかうまくいきません。

CSSでhtml要素をtable-cellで揃えています。クリック時にクリックした要素の文字の位置だけを下げたいのですが、横の列のものまで影響を受けてしまいます。
（A-Bをクリックしたら隣のC-DとEも下がってしまう）

違うtableに格納しても他に影響が出るとは思っていませんでした。
クリックしたもののみpaddingを適用することはできるのでしょうか？

外部サイト（JSFiddle）でソースを書きました

Answer 1

<div class="item">の子要素に<span>などを追加しtransformを使うと、
他のタグに影響があるような崩れ方はしないと思います。

<div class="base">
  <div class="in-base">
    <div>
      <div class="item"><span>A-B</span></div>
    </div>
    <div>
      <div class="item"><span>A</span></div>
      <div class="item"><span>B</span></div>
    </div>
    ...
  </div>
</div>

/*
.item:active {
  padding-top: 3px;
}
*/
.item:active span {
  transform: translate(0, 3px);
  display: block;
}

Comments

[yokochiki]

少ない修正で理想通りの動きをしてくれました！ありがとうございます。