tdタグにおいてvartical-align:bottomやvalign="bottom"が効かない

Question

下記のようなテーブルのセル内のテキストを下辺(bottom)に設定したいのですが
スタイルでvartical-align:bottom;を設定してもインラインでvalign="bottom"属性を設置しても
効きません。同じような問題が頻繁にあるようでgoogleで調べてみたのですがdisplayでinline要素に設定する
等を試したのですが、効果は得られませんでした。

コメントでご指摘の通りtdの高さを変更した場合、bottomよりであることは確認できたのですが、
bottomラインでより近い位置にテキストを配置したいのですがアドバイスを頂けますでしょうか？
現状は下記のJSFiddleに提示していますとおり、border-bottomからテキストとの距離があり、
padding-bottomを0にしても距離が埋まりません。（padding-bottomのマイナス値はinvalidでした）

原因と解決方法についてアドバイスを頂けますでしょうか。

ブラウザ：Google Chrome
バージョン: 67.0.3396.99（Official Build） （64 ビット

JSFiddle

    <div class="main_wrapper">
                <div class="kpi_1">
                  <table class="main_table">
                    <tr class="single_tr"><td class="single_td">AAAA</td></tr>
                    <tr class="single_tr"><td class="single_td">BBBB</td></tr>
                    <tr class="single_tr"><td class="single_td">CCCC</td></tr>
                    <tr class="single_tr"><td class="single_td">DDDD</td></tr>
                    <tr class="single_tr"><td class="single_td">EEEE</td></tr>
                    <tr class="single_tr"><td class="single_td">FFFF</td></tr>
                    <tr class="single_tr"><td class="single_td">GGGG</td></tr>
                  </table>
                </div>
     </div>

.model_sidebar{
height:300px!important;
}

.main_wrapper{
display:flex;
position:relative;
top:125px;
padding-top:20px;
padding-left:20px;
}

.single_tr{
  border-bottom:1px #888888 solid;
}
.single_td{
  padding-left: 3px;
  padding-right: 3px;
  vertical-align:bottom;//here

}
.main_table{
  border-collapse:collapse;
  font-size: 12px;
  }

Comments

[dit.]

vertical-align:bottom;は効いていると思います。tableやtdのheightを高くして、tdにborderでも入れてみるとわかります。「現状どうなっていて、どの部分が理想と違うのか」を図説できればきちんとした回答が付くかもしれません。質問には画像を載せることができます。

[m.ts10806]

現象確認されたブラウザとバージョンも記載してください。

[pegy]

コメント有難うございます。加筆させていただきました。

[pegy]

dit様もコメントありがとうございます。アドバイスをもとに質問記載事項を修正させて頂きました。

Answer 1

tdにつけた下線とテキストの間の余白は、line-heightによるものなので、
tdのpaddingを0にした上で更にline-heightを1（＝文字の高さと同じ）にすれば
かなり近づけることができると思います。
ただし、表示するフォントの種類によっては文字周りにわずかな余白をもたせたフォントデザインが
なされているため、おそらくそれでも下線にピッタリくっつけることはできないと思います。

tdにつけた下線に被るような形でピッタリ文字をくっつけたいなら、
td内のテキストをspan要素などで囲んで、その要素にposition: relative; bottom: -●px;
のように下方向に任意のサイズ分だけオフセットさせると良いかと思います。

Comments

[pegy]

aKusano様
ご回答、有難うございます。
ご教示頂いた方法で解決いたしました。
大変勉強になりました。

Answer 2

なるべく下の線に近づけたいということですかね？
.single_tdにline-height:1;を入れるだけでもある程度いけるとは思いますが、line-heightを変更するとマズい場合はこれだと対応できないですね…。

Comments

[pegy]

dit様
ご回答有難うございます。一旦はline-heightを設定することで解決しました。
他への影響が生じた場合に改めて検討いたします。
宜しくお願い申し上げます。

Answer 3

例えば、span等で囲ってしまえば微調整もできます。

<tr class="single_tr"><td class="single_td"><span>AAAA</span></td></tr>

  span {
    display: block;
    margin-bottom:-5px;
  }

Comments

[Atsushi_Okumura]

すでにaKusanoさんが回答されていましたね・・失礼しました。

[pegy]

いえ、コメントを頂き、有難うございます！
動作も確認してみました。

Answer 4

position: relativeでtdの相対座標をずらすことができます。

JSFiddle

position: relative;
bottom: -5px;

Comments

[pegy]

horse_n_deer様
positionでずらしてしまうという手もあるのですね。実際に動作も確認できました。他の要素への影響があるため、採用は難しいのですがその様な方法もあることについて大変勉強になりました。

Answer 5

効いてますね

.single_tdに「padding-bottom: 0px;line-height:1em;height:1.5em;」を付加してみてください

Comments

[pegy]

yambejp様
いつもご回答有難うございます。
line-heightを設定すると本来の要素の高さが失われてしまう？ので別途heightを設定しなければならないのか、ここら辺の関係をもう少し調べてみようと思います。
有難うございました。