我只知道 CSS 的基礎知識，所以不知道如何去做。我有一個主要包含單行數據的表格，但第一行中的最后一個單元格（稱為“其他”）有多行有沒有一種方法可以使表格中除該單元格之外的每個單元格的高度變小？現在，由于多行列太大，導致其余單元格在數據上方和下方有額外的空白（請參見第一個屏幕截圖）。當我更改 的 line-height 時，它使整個表格看起來不錯，除了一個具有多行的單元格（參見第二個屏幕截圖）td沒有line-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函數
TA貢獻1836條經驗 獲得超4個贊
Rowspan 可能也不會滿足您的要求。不過，還有一個替代方案，但它不是pretty。
將內容包裹在 div 中，設置其高度并設置 overflow:scroll。這將為內容提供一個滾動條，用戶可以上下滾動。
下面只是一個示例，因此您可能需要調整高度以顯示您想要的方式。
<style>
.other{
height:50px;
overflow:scroll
}
</style>
<td>
<div class="other">
content goes here.
</div>
湖上湖
TA貢獻2003條經驗 獲得超2個贊
您還可以截斷文本（并添加省略號）以表明內容比顯示的內容更多。
添加的簡單好處是，如果您向單元格添加 title 屬性，則單元格的完整內容可以顯示為類似于 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 關注
- 186 瀏覽
添加回答
舉報
0/150
提交
取消