设置表的行高

我有这个密码:

<table class="topics" >
<tr>
<td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
<td style="padding: 0 4px 0 0;">1.0</td>
<td>abc</td>
</tr>
<tr>


<td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
<td style="padding: 0 4px 0 0;">1.3</td>
<td>def</td>
</tr>
</table>

行之间的距离太远了，我希望行之间的距离更近一些。

我所做的是添加以下 CSS，但它似乎没有改变任何东西。

.topics tr { height: 14px; }

我做错了什么？

529788 次浏览
小开

尝试为 td设置属性 所以:

.topic td{ height: 14px };
小开
最佳答案

试试这个:

.topics tr { line-height: 14px; }

小开

如果在表上放置 border-collapse: collapse; CSS 语句，也可以删除一些额外的间距。

小开

Line-height 只有当它大于 <td>内容的当前高度时才起作用。因此，如果表中有一个50x50的图标，则 tr行高不会使行小于50px (+ 填充)。

既然你已经将填充设置为 0，那么它一定是别的什么东西,
例如，在 td中大于14px 的字体大小。

小开

如果您正在使用 Bootstrap，请查看 td的 padding。

小开

一旦我需要固定一个特定值行的高度 通过使用如下内联 CSS. 。

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>
小开

对于我的目的，我发现最好的答案是使用:

.topics tr {
overflow: hidden;
height: 14px;
white-space: nowrap;
}

white-space: nowrap非常重要，因为它可以防止行的单元格跨越多行。

我个人喜欢将 text-overflow: ellipsis添加到我的 th和 td元素中，通过添加后面的全句(例如 Too long gets dots...) ，使溢出的文本看起来更美观

小开

至于我，我决定使用填充物。 它不完全是您所需要的，但在某些情况下可能有用。

table td {
padding: 15px 0;
}
小开

看起来 row的 height依赖于 td的 height。因此，我们可以把一些 div和设置 height的 div固定 row的 height。

举个例子:

td.table-column > div.item {
height: 20px;
overflow:hidden;
background-color: lightpink;
}
  <table>
<tr>
<td class="table-column">
<div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
</td>
<td class="table-column">
<div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
</td>
<td class="table-column">
<div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
</td>
<td class="table-column">
<div class="item">This is very long text 1 2 3 4 5 6 7 8</div>
</td>
</tr>
</table>

小开

下面将展开/折叠 Table Row (tr) ，并考虑到如果您有多个 Table，因此需要一些次要的 js。非常小的编码 IMO

function row_expand_collapse(e){


//get table id so you know what table to manipulate row from
const tableID = e.parentNode.parentNode.id;


//get row index and increment by 1 so you know what row to expand/collapse
const i = e.rowIndex + 1;


//get the row to change the css class on
let row = document.getElementById(tableID).rows[i]


// Add and remove the appropriate  css classname to expand/collapse the row


if (row.classList.contains('row-collapse')){
row.classList.remove('row-collapse')
row.classList.add('row-expand')
return
}
if (row.classList.contains('row-expand')){
row.classList.remove('row-expand')
row.classList.add('row-collapse')
return
}
}
.row-collapse td{
padding: 0px 0px;
line-height: 0px;
white-space: nowrap;
overflow: hidden;
transition-duration: .75s;
}
.row-expand td {
line-height: 100%;
transition-duration: .75s;
}
table, th, td{
width: 75%;
border: 1px solid black;
border-collapse: collapse;
padding: 15px 15px;
margin: 15px 15px;
text-align: center;
}
            <table id="Table-1">
<thead>
<tr>
<th colspan="10">TABLE 1</th>
</tr>
</thead>
<tbody id="Tbody-1">
<tr onclick="row_expand_collapse(this)">
<td colspan="10">Row 1 - Click Me to See Row 2</td>
</tr>
<tr class="row-collapse">
<td colspan="10">Row 2</td>
</tr>
<tr onclick="row_expand_collapse(this)">
<td colspan="10">Row 3 - Click Me to See Row 4</td>
</tr>
<tr class="row-collapse">
<td colspan="10">Row 4</td>
</tr>
</tbody>
</table>


            

<table id="Table-2">
<thead>
<tr>
<th colspan="10">TABLE 2</th>
</tr>
</thead>
<tbody id="Tbody-2">
<tr onclick="row_expand_collapse(this)">
<td colspan="10">Row 1 - Click Me to See Row 2</td>
</tr>
<tr class="row-collapse">
<td colspan="10">Row 2</td>
</tr>
<tr onclick="row_expand_collapse(this)">
<td colspan="10">Row 3 - Click Me to See Row 4</td>
</tr>
<tr class="row-collapse">
<td colspan="10">Row 4</td>
</tr>
</tbody>
</table>

小开

你可以试试这个。

{
line-height: 15px;  //or
height:15px;        //or
padding: 5px 5px;
}

为我工作. 。


提交答案