所以我的問題可以在這張圖片中看到： 如何使每個單元格的文本高度相同？最后一個<th>(text+img) 不知為何把它拖了下來。我的CSS：.table { width: 100%; padding: 0; margin: 15px 0 0; border-collapse: collapse}.table th { text-align: left; color: #fff; background: 0 0; text-transform: uppercase; font-size: .9em; line-height: 1em; padding: .5em;}.table th.gold { color: #ffdd45}.table td { padding: .7em .5em .6em; font-size: 1.1em; line-height: 1.2em; background: #222; border: 2px solid rgba(0, 0, 0, 0); vertical-align: middle;}<table class="table rate" style="margin-top: 0;"> <thead> <tr> <th>#</th> <th>User</th> <th>Number 1</th> <th class="gold">Number 2</th> <th>text+img</th> </tr> </thead> <tbody id="players-table1"> <tr> <td style="text-align: center;">1</td> <td> <a href="/user/9842394892389" class="username"> <img src="piclink" alt="Аvatar"><span>user0</span></a> </td> <td>4</td> <td class="bold gold">500</td> <td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:10%"/></i></td> </tr> <tr> <td style="text-align: center;">2</td> <td> <a href="/user/9842394892389" class="username"> <img src="piclink" alt="Аvatar"><span>user</span></a> </td> <td>4</td> <td class="bold gold">400</td> <td style="width:10%"><i>35x<img src="piclink" style="width:55%;height:10%"/></i></td> </tr> <tr> <td style="text-align: center;">3</td> <td> <a href="/user/9842394892389" class="username"> <img src="piclink" alt="Аvatar"><span>user2</span></a> </td> <td>3</td> <td class="bold gold">300</td> <td style="width:10%"><i>35x<img src="piclink" style="width:55%;height:10%"/></i></td> </tr>
1 回答
江戶川亂折騰
TA貢獻1851條經驗 獲得超5個贊
有兩種方法可以解決這個問題：
降低高度
image（這是我在回答中所做的），這是10%以前的，我把它做成5%. 由于這個原因，內容td被壓低了。如果您不想降低圖像的高度，則必須增加每個圖像的高度，
row以便高度可以輕松適應。
所以選擇是你的。
.table {
width: 100%;
padding: 0;
margin: 15px 0 0;
border-collapse: collapse
}
.table th {
text-align: left;
color: #fff;
background: 0 0;
text-transform: uppercase;
font-size: .9em;
line-height: 1em;
padding: .5em;
}
.table th.gold {
color: #ffdd45
}
.table td {
padding: .7em .5em .6em;
font-size: 1.1em;
line-height: 1.2em;
background: #222;
border: 2px solid rgba(0, 0, 0, 0);
vertical-align: middle;
border: 1px solid red;
}
<table class="table rate" style="margin-top: 0;">
<thead>
<tr>
<th>#</th>
<th>User</th>
<th>Number 1</th>
<th class="gold">Number 2</th>
<th>text+img</th>
</tr>
</thead>
<tbody id="players-table1">
<tr>
<td style="text-align: center;">1</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user0</span></a>
</td>
<td>4</td>
<td class="bold gold">500</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">2</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user</span></a>
</td>
<td>4</td>
<td class="bold gold">400</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">3</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
<tr>
<td style="text-align: center;">4</td>
<td>
<a href="/user/9842394892389" class="username">
<img src="piclink" alt="Аvatar"><span>user2</span></a>
</td>
<td>3</td>
<td class="bold gold">300</td>
<td style="width:10%"><i>35x<img src="http://placekitten.com/301/301" style="width:55%;height:5%"/></i></td>
</tr>
</tbody>
</table>
- 1 回答
- 0 關注
- 121 瀏覽
添加回答
舉報
0/150
提交
取消