我只知道 CSS 的基礎(chǔ)知識，所以不知道如何去做。我有一個主要包含單行數(shù)據(jù)的表格，但第一行中的最后一個單元格（稱為“其他”）有多行有沒有一種方法可以使表格中除該單元格之外的每個單元格的高度變??？現(xiàn)在，由于多行列太大，導(dǎo)致其余單元格在數(shù)據(jù)上方和下方有額外的空白（請參見第一個屏幕截圖）。當(dāng)我更改 的 line-height 時，它使整個表格看起來不錯，除了一個具有多行的單元格（參見第二個屏幕截圖）td沒有l(wèi)ine-height：添加了 line-height：html（我省略了一些td以使其看起來更干凈）：<table class="table"> <thead> <tr> <th scope="col">Something</th> <th scope="col">Code Version</th> <th scope="col">Region</th> <th scope="col">Something</th> <th scope="col">Something</th> <th scope="col">Something->Membership</th> <th scope="col">SBMO</th> <th scope="col">Something</th> <th scope="col">IVR</th> <th scope="col">CPM Something</th> <th scope="col">Other</th> </tr> </thead> <tbody><!-- start loop for mongodb collection: environments--> <% environments.forEach(function(environment){ %> <tr> <td> <%= environment.something %> </td> <td> <%= environment.codeVersion %> </td> <td> <%= environment.region %> </td> <!-- other td's go here ---> <!-- CELL WITH MULTIPLE LINES: --> <td class="other"> <%= environment.other %> </td> <%}); %> <!-- end loop for environments --> </tr> </tbody></table>CSS：.table td { padding: 0 !important; margin: 0 !important; vertical-align: middle; border-right: 1px solid #d4d4d4;}other { white-space: pre-wrap;}
2 回答
HUH函數(shù)
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超4個贊
Rowspan 可能也不會滿足您的要求。不過，還有一個替代方案，但它不是pretty。
將內(nèi)容包裹在 div 中，設(shè)置其高度并設(shè)置 overflow:scroll。這將為內(nèi)容提供一個滾動條，用戶可以上下滾動。
下面只是一個示例，因此您可能需要調(diào)整高度以顯示您想要的方式。
<style>
.other{
height:50px;
overflow:scroll
}
</style>
<td>
<div class="other">
content goes here.
</div>
湖上湖
TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個贊
您還可以截?cái)辔谋荆ú⑻砑邮÷蕴枺┮员砻鲀?nèi)容比顯示的內(nèi)容更多。
添加的簡單好處是，如果您向單元格添加 title 屬性，則單元格的完整內(nèi)容可以顯示為類似于 tooltip
請參閱下面的演示：
table {
box-sizing: border-box;
border-collapse: collapse;
max-width: 800px;
}
table td,
table th {
vertical-align: middle;
border: 1px solid #d4d4d4;
width: 100px;
max-width: 300px;
}
td.other {
overflow: hidden;
max-width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
}
<h2>sample</h2>
<table class="table">
<thead>
<tr>
<th scope="col">Something</th>
<th scope="col">Code Version</th>
<th scope="col">Region</th>
<!--
<th scope="col">Something</th>
<th scope="col">Something</th>
<th scope="col">Something->Membership</th>
<th scope="col">SBMO</th>
<th scope="col">Something</th>
<th scope="col">IVR</th>
<th scope="col">CPM Something</th>
-->
<th scope="col">Other</th>
</tr>
</thead>
<tbody>
<!-- start loop for mongodb collection: environments-->
<tr>
<td>
something
</td>
<td>
version
</td>
<td>
region
</td>
<!-- other td's go here --->
<!-- CELL WITH MULTIPLE LINES: -->
<td class="other" title="other (multi-line) - this is a very long line that should not wrap around the td">
other (multi-line) - this is a very long line that should not wrap around the td
</td>
<!-- end loop for environments -->
</tr>
</tbody>
</table>
- 2 回答
- 0 關(guān)注
- 180 瀏覽
添加回答
舉報(bào)
0/150
提交
取消