セル内のコンテンツがテーブル行の高さに影響するのを防ぐ

Question

このように、テーブル行/セル内にこの種のバッジ（ここの内容）がありますが、テーブル行全体の高さに影響しますどういうわけかを防ぐために...基本的に私は "ここの内容"のバッジをセルに合わせたいと思っていて、何とか行全体からいくつかのパディングを取り除くので、すべての行が同じ高さになります。これを実装する方法はありますか？

.table-head { 
 
    background: lightblue; 
 
} 
 

 
.table-body { 
 
    background: lightgreen; 
 
} 
 

 
td { 
 
    padding: 8px 0; 
 
} 
 

 
.content-here { 
 
    text-transform: uppercase; 
 
    border-radius: 5px; 
 
    color: white; 
 
    font-weight: 600; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    background: purple; 
 
    display: table-cell; 
 
    font-size: 14px; 
 
    padding: 5px 20px; 
 
} 
 

 
@media only screen and (max-width: 500px) { 
 
    .live { 
 
    padding: 15px 12px; 
 
    } 
 
}

<table class="simple-table"> 
 
    <thead class="table-head"> 
 
    <tr class="table-row"> 
 
     <td>Day</td> 
 
     <td>Date</td> 
 
     <td>Time</td> 
 
     <td>No</td> 
 
     <td>Lorem ipsum</td> 
 
     <td>Ipsum lorem</td> 
 
     <td>Lorem</td> 
 
    </tr> 
 
    </thead> 
 

 
    <tbody class="table-body"> 
 
    <tr class="table-row"> 
 
     <td><span class="content-here">content here</span></td> 
 
     <td>Lorem ipsum</td> 
 
     <td>Ipsum lorem</td> 
 
     <td>Lorem</td> 
 
    </tr> 
 

 
    <tr class="table-row"> 
 
     <td>Day</td> 
 
     <td>Date</td> 
 
     <td>Time</td> 
 
     <td>No</td> 
 
     <td>Lorem ipsum</td> 
 
     <td>Ipsum lorem</td> 
 
     <td>Lorem</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

ここではペンです：https://codepen.io/anon/pen/Oxbgzw

Answer 1

私はあなたが右理解していれば。あなたは、TDのパディングを持っていて、それはそれはあなたが瞬間を持っていることを、クラスのを持っているとき、あなたはこのようにそれを作ることができる

ように見えるまたがる：

.table-head td { 
padding: 8px 0; 
} 
.table-row:nth-child(2) td { 
padding: 8px 0; 
} 
.content-here { 
text-transform: uppercase; 
border-radius: 5px; 
color: white; 
font-weight: 600; 
text-align: center; 
font-family: sans-serif; 
background: purple; 

font-size: 14px; 
padding: 8px 20px; 
display:block; 

} 

は、問題があることがわかりスパンに5px + tdに8px、次にテーブルの中段に合計13pxとフォントサイズを加えれば、スパンとパディングの両方にパディングがあることを伝えています他の行よりも大きい

Answer 2

現在、CSSは親要素のセレクタを提供していません。 代わりにtd要素にクラスコンテンツを追加してください。ここで

このよう

<tbody class="table-body"> 
<tr class="table-row"> 
    <td class="content-here" ><span>content here</span></td> 
    <td>Lorem ipsum</td> 
    <td>Ipsum lorem</td> 
    <td>Lorem</td> 
</tr> 

はリンク https://codepen.io/anon/pen/jGVLLq

ある