在CSS中设置表格行高

Question

我有这个代码:

<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; }

我究竟做错了什么？

Answer 1

试试这个:

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

Answer 2

尝试为td so 设置属性:

.topic td{ height: 14px };

Answer 3

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

Answer 4

我发现我的目的的最佳答案是使用：

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

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

我个人喜欢通过添加尾随句号来添加text-overflow: ellipsis到我的th和td元素以使溢出的文本看起来更好，例如Too long gets dots...

Answer 5

line-height 仅在它大于<td>. 因此，如果表格中有 50x50 图标，tr行高不会使行小于 50px（+ 填充）。

由于您已经将填充设置为0它必须是其他内容，
例如内部的大字体大小td大于您的 14px。

Answer 6

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

table td {
    padding: 15px 0;
}

Answer 7

下面将展开/折叠表行（tr），考虑到您是否有多个表，因此需要一些小的 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>