Question

我需要调整故事中的行的大小。我使用引导程序，所以我的表是：

<table class="table">....</table>

当用户将光标移动到该行时，我需要调整行的大小，以便在CSS中进行操作

tr:hover{
transform:scale(1.01);
}

问题是当我继续前进时，调整大小是正确的，但是边框消失了。有人可以帮助我吗？

Answer 1

问题出在表的border-collapse属性上。

此属性有很多副作用，例如表的阴影可能会被截断，或者合并了边框（如我们在此处看到的）。解决方法可能是将border-collapse更改为separate，如下所示

不过，副作用是不再合并单元格分隔符，这可能会改变表格的美感。到目前为止，似乎该引导程序组件的渲染与此属性没有什么不同。

但是，我建议您应该对该解决方案进行更深入的研究。

.table {
  border-collapse: separate;
}

.table tr{
  transition:all 500ms;
}

.table tr:hover{
  transform:scale(1.05);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
<tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
<tr>
<tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
<tr>
</table>

Answer 2

尝试此代码

$(function () {
    setNavigacija();
});

function setNavigacija() {
    var path = window.location.href;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);
    $("#navmenu li a").each(function () {
        var href = $(this).attr('href');
        if (path.indexOf(href) != -1) {
            $(this).closest('li').addClass('active');
        }
    });
}

.table td{
  transition:all 500ms;
}

.table tr:hover > td{
  transform:scale(1.05);
}

如何调整大小而又不丢失边框底部

2 个答案: