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

标签 html css

我正在制作一个包含一些标记的表格，这些标记周围有一个框。当您将鼠标悬停在框上时，标记的大小需要稍微扩大一点以表明它处于事件状态。这是我的代码:

.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 添加最大高度，但这会阻止标记跳到下一行，并使标记仅在底部增加高度。

最佳答案

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

.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>

关于html - 增加框的填充会增加它所在的表格行的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50064392/

上一篇：javascript - 如何在 slider 中的图像之间转换

下一篇：javascript - 如何自动放映幻灯片

相关文章：

html - Angular 2使组件相互重叠

css - addThis Sharing Buttons for Wordpress，如何制作动画？

css - Opera 特有的布局问题( float )

html - 如何将 Logo 图像放在中心，同时将登录链接保持在右侧

php - 如何使用复选框从网格中选择文件以添加到 zip 以供下载

javascript - angularJS 仅在 javascript 对象中存在时才添加 ng-href

html - 如何在 Windows 操作系统中隐藏垂直滚动条

html - CSS join form input, select and submit elements into a single box

python - 似乎无法使用 Python 和 Beautiful Soup 将所有信息写入 CSV 文件

css - 已加载但未在 rails 4 中应用的 Assets

©2024 IT工具网  联系我们