html - 增加盒子的填充会增加它所在的表格行的高度

Question

我正在制作一张包含一些标记的表格，它们周围有一个盒子。当您将鼠标悬停在该框上时，该标记需要稍微扩大一点以显示它处于活动状态。这是我的代码：

.container {
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
}

#mark_table {
  text-align: center;
  padding: 0;
  border: 1px solid #DDDDDD;
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: 'Open Sans';
}

#mark_table tr {
  border-bottom: 1px solid #DDDDDD;
  max-height: 39px;
  height: 20px;
}

#mark_table .spacer {
  width: 100%;
}

#mark_table th {
  padding: 5px;
  vertical-align: bottom;
}

#mark_table .rotate_th {
  padding: 0;
  vertical-align: middle;
}

#mark_table .rotate {
  transform: rotate(285deg);
  padding: 0;
}

#mark_table .table_header {
  height: 60px;
  text-align: center;
}

.mark_wrapper {
  text-align: left;
}

.mark {
  background-color: #00C853;
  display: inline-block;
  margin: 5px;
  min-width: 30px;
  max-width: 30px;
  border-radius: 3px;
  text-align: center;
}

.mark:hover {
  padding: 1px;
}

.mark a {
  color: white;
  text-decoration: none;
  cursor: default;
  display: inline-block;
  margin: 5px;
}

@media screen and (max-width: 1024px) {
  body {
    position: relative;
    height: 100%;
  }
  .container {
    left: 0;
    transform: none;
    box-sizing: border-box;
    height: 100%;
    width: auto;
    padding: 2%;
  }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


<div class="container">
  <table id="mark_table">

    <tr class="table_header">
      <th>Vakken</th>
      <th>Cijfers</th>
      <th class="spacer"></th>
      <th class="rotate_th">
        <div class="rotate">Rapport Gem.</div>
      </th>
      <th class="rotate_th">
        <div class="rotate">Rapport Cijfer</div>
      </th>
    </tr>


    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    
  </table>
</div>

.mark 类包含标记。如您所见，每当您将鼠标悬停在其中一个上时，它的填充会增加，但会增加行的高度并将其他标记向右移动一点。

我需要行高保持不变，而其他标记保持不变。请记住，每当添加太多标记时，它们都需要跳到下一行。

我尝试为 mark_wrapper 添加一个最大高度，但这会阻止标记跳到下一行，并使标记仅在底部增加高度。

标签： htmlcss

Answer 1

不是添加填充，而是添加缩放效果以标记悬停

.mark:hover {
  transform:scale(1.1);
}

.container {
  position: absolute;
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  margin: 0;
}

#mark_table {
  text-align: center;
  padding: 0;
  border: 1px solid #DDDDDD;
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: 'Open Sans';
}

#mark_table tr {
  border-bottom: 1px solid #DDDDDD;
  max-height: 39px;
  height: 20px;
}

#mark_table .spacer {
  width: 100%;
}

#mark_table th {
  padding: 5px;
  vertical-align: bottom;
}

#mark_table .rotate_th {
  padding: 0;
  vertical-align: middle;
}

#mark_table .rotate {
  transform: rotate(285deg);
  padding: 0;
}

#mark_table .table_header {
  height: 60px;
  text-align: center;
}

.mark_wrapper {
  text-align: left;
}

.mark {
  background-color: #00C853;
  display: inline-block;
  margin: 5px;
  min-width: 30px;
  max-width: 30px;
  border-radius: 3px;
  text-align: center;
}

.mark:hover {
  transform:scale(1.1);
}

.mark a {
  color: white;
  text-decoration: none;
  cursor: default;
  display: inline-block;
  margin: 5px;
}

@media screen and (max-width: 1024px) {
  body {
    position: relative;
    height: 100%;
  }
  .container {
    left: 0;
    transform: none;
    box-sizing: border-box;
    height: 100%;
    width: auto;
    padding: 2%;
  }
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


<div class="container">
  <table id="mark_table">

    <tr class="table_header">
      <th>Vakken</th>
      <th>Cijfers</th>
      <th class="spacer"></th>
      <th class="rotate_th">
        <div class="rotate">Rapport Gem.</div>
      </th>
      <th class="rotate_th">
        <div class="rotate">Rapport Cijfer</div>
      </th>
    </tr>


    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>
    <tr>
      <td class="subject">
        <span title="Nederlandse taal en cultuur">netl</span>
      </td>
      <td colspan="2">
        <div class="mark_wrapper">
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
          <div class="mark"><a href="#">X.X</a></div>
        </div>
      </td>
      <td>
        <div class="mark"><a href="#">X.X</a></div>
      </td>
      <td class="final">
        <div class="mark"><a href="#">X</a></div>
      </td>
    </tr>

    
  </table>
</div>