試圖讓其他細胞縮小，並在表上

我想使它所以當我徘徊這些細胞的一個懸停在該小區當一個細胞擴展，它得到更大，和所有其他細胞得到更小（但不會消失），但我也不希望單元格擴展到表外或使表的邊界更大。試圖讓其他細胞縮小，並在表上

如何解決這個問題？

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

試圖讓其他細胞縮小，並在表上

回答

相關問題