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的属性这样：

.topic td{ height: 14px };

Answer 3

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

Answer 4

行高只有在大于<td>内容的当前高度时才有效。因此，如果表格中有50x50图标，tr行高不会使行小于50px（+填充）。

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

Answer 5

对于我来说，我决定使用填充。这并不是您真正需要的，但是在某些情况下可能会有用。

table td {
    padding: 15px 0;
}

Answer 6

如果您使用的是Bootstrap，请查看padding的{{1}}。

Answer 7

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

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

Answer 8

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

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

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

我个人喜欢将text-overflow: ellipsis添加到我的th和td元素中，以通过添加结尾的句点（例如Too long gets dots...

Answer 9

看起来 height 的 row 取决于 height 的 td。因此，我们可以放入一些 div 并将 height 设置为该 div 以修复 height 的 row。

示例：

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>

Answer 10

考虑到如果您有多个表，因此需要一些次要的 js，以下将展开/折叠表行 (tr)。很少编码 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>

设置表格行高

10 个答案: