防止影響表格行高度的單元格內的內容

因此，我在表格行/單元格內獲得了這種徽章（Content here），但影響了整個表格行的高度，我希望以防止以某種方式...因此，基本上我想「內容在這裏」的徽章，以適應單元格，並以某種方式從整行中取一些填充，所以所有的行都是相同的高度。任何想法如何實現這可能嗎？防止影響表格行高度的單元格內的內容

.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

來源

2017-09-24 Smithy

如果我理解你的權利。你有你的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加上你的字體大小，你會告訴它在跨度和td上都有填充大於其他行

來源

2017-09-24 11:21:36 Anker

當前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

來源

2017-09-24 12:17:12 Obed

防止影響表格行高度的單元格內的內容

回答

相關問題