试图让其他细胞缩小，并在表上

我想使它所以当我徘徊这些细胞的一个悬停在该小区当一个细胞扩展，它得到更大，和所有其他细胞得到更小（但不会消失），但我也不希望单元格扩展到表外或使表的边界更大。试图让其他细胞缩小，并在表上

如何解决这个问题？

CSS代码：

.Grid_Options { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 50px; 
    text-align: center; 
    font-family: Titillium Web; 
    background-color: #C0C0C0; 
    border: 0; 
} 

.Grid_Options td { 
    width: 300px; 
    height: 200px; 
    transition: 0.5s; 
    font-size: 35px; 
    color: black; 
} 

.Grid_Options td:hover { 
    padding: 15px; 
    position: relative; 
    background-color: #686868; 
    color: #DDD; 
}

HTML代码：

 <table class="Grid_Options" cellspacing="0" cellpadding="0"> 
     <tbody> 
      <tr> 
        <td>Placeholder</td> 
        <td>Placeholder</td> 
       </tr> 
       <tr> 
        <td>Placeholder</td> 
        <td>Placeholder</td> 
       </tr> 
       <tr> 
        <td>Placeholder</td> 
        <td>Placeholder</td> 
       </tr> 
      </tbody> 
     </table>

来源

2017-09-26 PinguMcDude

您可以[编辑您的问题**]（https://stackoverflow.com/posts/46433002/edit）来解释您包含的示例与您期望完成的不同之处？ – Santi

我也不想细胞表外扩或使边界桌子更大。

我们可以通过取消对:hover您padding尺寸的增加，并用transform: scale替换它做到这一点。这不会影响CSS中任何其他项目的流动。

请注意，我们现在还需要将overflow: hidden添加到表格中，以便缩放后的单元格不会溢出边缘。

.Grid_Options { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 50px; 
 
    text-align: center; 
 
    font-family: Titillium Web; 
 
    background-color: #C0C0C0; 
 
    border: 0; 
 
    overflow: hidden; /* add this */ 
 
} 
 

 
.Grid_Options td { 
 
    width: 300px; 
 
    height: 200px; 
 
    transition: 0.5s; 
 
    font-size: 35px; 
 
    color: black; 
 
} 
 

 
.Grid_Options td:hover { 
 
    transform: scale(1.1); /* add this */ 
 
    background-color: #686868; 
 
    color: #DDD; 
 
}

<table class="Grid_Options" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

来源

2017-09-26 18:03:30

这工作，但我还有一个问题，如果我想缩小其他单元格，我该怎么办？谢谢 – PinguMcDude

@PinguMcDude你可以用'padding'保留你的原始代码，并在表格上定义一个'width'和'height'（'.Grid_Options'）。这将阻止细胞使表增长。 –

这对除了底部以外的所有侧面都有效，即使我设置了特定的宽度和高度，表底部仍然会增长，关于如何解决此问题的任何想法？ – PinguMcDude

乔恩Uleis了完美的答案。但如果你还需要缩小其他单元格，这里修改后的CSS。

.Grid_Options { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 50px; 
 
    text-align: center; 
 
    font-family: Titillium Web; 
 
    background-color: #C0C0C0; 
 
    border: 0; 
 
    overflow: hidden; /* add this */ 
 
} 
 

 
.Grid_Options td { 
 
    width: 300px; 
 
    height: 200px; 
 
    transition: 0.5s; 
 
    font-size: 35px; 
 
    color: black; 
 
} 
 
.Grid_Options:hover td { 
 
    transform: scale(0.9); 
 
} 
 
.Grid_Options:hover td:hover { 
 
    transform: scale(1.1); /* add this */ 
 
    background-color: #686868; 
 
    color: #DDD; 
 
}

<table class="Grid_Options" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Placeholder</td> 
 
     <td>Placeholder</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

你也可以试试的scaleX变换函数，而不是大规模的，以保持行的高度不变。

来源

2017-09-26 18:56:57

这在一定程度上起作用，但它只会缩小我正在徘徊的单元格旁边的单元格，底部单元格和另一侧单元格不会受到影响。 – PinguMcDude

我更新了一个片段，再次检查PLZ。我没有得到，你需要表中的所有单元格，而不是只在当前行。 –

这工作，谢谢你的帮助 – PinguMcDude

试图让其他细胞缩小，并在表上

回答

相关问题