Angular-使用CSS对HTML表格行进行分组

Question

我已经用Bootstrap实现了这个示例表。当我单击按钮时，我想隔离该行，这意味着我想在其他行/头之间添加一些间隙。我尝试了在StackOverflow上找到的许多CSS命令，但没有一个起作用。我知道如何将它与带有(click)的Typescript结合使用。我主要希望CSS看起来很漂亮。 我的表格是使用*ngFor动态生成的，但在此示例中，我将其设置为静态。

body {
    background-color: #f2f2f2;
}

.table {
    background-color: #fff;
    box-shadow: 0px 2px 2px #aaa;
    margin-top: 50px;
    border-collapse: collapse;
}
.table-bordered {
    border: 1px solid #dee2e6;
}


.isolated {
  border-spacing: 2em;
  margin-bottom: 2em;
  margin-top: 2em;
  
  
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<table class="table table-bordered">
    <thead>
        <th>Head</th>
        <th>Head</th>
        <th>Head</th>
        <th>Head</th>
        <th>Head</th>
        <th>Head</th>
    </thead>
    <tbody>
        <tr>
            <td>element</td>
            <td>element</td>
            <td>element</td>
            <td>element</td>
            <td>element</td>
            <td><button class="btn btn-primary">Isolate me!</button></td>
        </tr>
        <tr class="isolated">
            <td>element</td>
            <td>element</td>
            <td>element</td>
            <td>element</td>
            <td>element</td>
            <td><button class="btn btn-primary">Isolate me!</button></td>
        </tr>
        <tr>
            <td>element</td>
            <td>element</td>
            <td>element</td>
            <td>element</td>
            <td>element</td>
            <td><button class="btn btn-primary">Isolate me!</button></td>
        </tr>
    </tbody>
</table>

Answer 1

您将需要js支持。

$(document).ready(function() {
  $('.isolate').click(function() {
    $(this).parents('tr').find('td>div').css({
      'margin': '20px'
    });
  });
});

body {
  background-color: #f2f2f2;
}

.table {
  background-color: #fff;
  box-shadow: 0px 2px 2px #aaa;
  margin-top: 50px;
  border-collapse: collapse;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered td {
  border: none !important;
  padding: 0 !important;
}

.table-bordered td>div {
  border: 1px solid #dee2e6;
  padding: .75rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<table class="table table-bordered">
  <thead>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
    <th>Head</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td><button class="btn btn-primary isolate">Isolate me!</button></td>
    </tr>
    <tr>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td><button class="btn btn-primary isolate">Isolate me!</button></td>
    </tr>
    <tr>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td>
        <div>element</div>
      </td>
      <td><button class="btn btn-primary isolate">Isolate me!</button></td>
    </tr>
  </tbody>
</table>

Answer 2

您不能在<tr>上使用 margin 。可以使用填充，但是如果您不想使用它，则可能的解决方法是隐藏并显示（或创建并销毁）为空被按下的按钮上方和下方的行。当然，您必须使用 JavaScript ，因为您需要实现一些逻辑。