时间戳

首页 > 解决方案 > 更改字体样式时如何防止表格上下文调整大小/更改填充？

html - 更改字体样式时如何防止表格上下文调整大小/更改填充？

问题描述

我创建了一个有几行的表。当我单击其中一个时，该行中的文本变为粗体并且颜色发生变化（无关紧要的外部脚本）。问题是当我点击其中任何一个时，整个表格布局会移动少量像素。尝试删除类，刷新并再次添加 - 你会明白我的意思。

我确实尝试阅读了一些关于类似问题的解决方案，但到目前为止没有任何结果。

HTML CODE

<body>
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Justin</td>
                <td>Kekars</td>
                <td>31</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Thomas</td>
                <td>The tank</td>
                <td>18</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Jamie</td>
                <td>Paul</td>
                <td>46</td>
            </tr>
            <tr class="active-row">
                <td>4</td>
                <td>Michael</td>
                <td>Mouse</td>
                <td>21</td>
            </tr>
        </tbody>
    </table>
</body>


CSS CODE

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --green-color: #009879;
}

body{
    background-color: #ddd;
}

.table{
    border-collapse: collapse;
    table-layout: fixed;
    margin: 25px 10px;
    font-size: 0.9em;
    min-width: 400px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    cursor: context-menu;
}

.table thead tr{
    background-color: var(--green-color);
    color: #ffffff;
    text-align: left;
    font-weight: bold;
}

.table th,
.table td{
    padding: 12px 15px;
}

.table tbody tr {
    border-bottom: 1px solid #ddd;
}

.table tbody tr:nth-of-type(even){
    background-color: #f3f3f3;
}

.table tbody:last-of-type{
    border-bottom: 2px solid var(--green-color);
}

.active-row{
    font-weight: bold;
    color: var(--green-color);
}

标签： htmlcss

解决方案

推荐阅读