表格單元的樣式邊框

Question

如果我們想要實現以下操作，即設置邊框的樣式，使邊框的右下角較粗，懸停時顯示加號。

我做了什麼：我在表上完成小區的選擇。正常的邊界。即使嘗試過邊框造型，但其中大部分都是圓形或邊框，這在這裏沒有用處。

我在做什麼：我試圖在html表中模仿excel的系列填充功能。功能不是問題。我只是試圖讓這些邊界的樣式正確，以便更容易理解。

那麼，我們如何定製邊界才能使用css和html來獲得所需的效果？ select.js

 $(function() { 
     $('td').click(function() { 
     $(this).toggleClass('highlight'); 
     }); 
    }); 

table.html

<table border="1" cellpadding="15"> 
     <tbody> 
      <tr> 
      <td>23</td> 
      <td>57</td> 
      <td>62</td> 
      </tr> 
     </tbody> 
    </table> 

table.css

 .highlight { 
     border-radius: 0px 0px 5px 5px; 
     border: 2px solid black; 
    } 

Answer 1

編輯

我回去後添加不同的行爲，每個單元看着它的形象我相信我很理解現在查看更新後的代碼段。

---

。已經引起了我的注意，你可能不希望每一個路細胞（我傾向於進入自動編碼，像一個機器人。）我修改它，以便最後一個單元格將有 div.pad。

---

你是指每個細胞或正方形的正方形嗎？如果後者，讓我知道，這是一個簡單的調整。我用

• position: relative和absolute

• z-index

• border-collapse: separate

• border-spacing，border，並且outline

• 僞元素::before和::after

• 2的unicode實體\1f4c4和\2795➕

• ，當然還有:hover僞類。

• 添加tr:last-of-type td:last-of-type來挑出最後一個單元格。

它看起來笨重，因爲沒有提到任何尺寸，但由於蓬鬆凸顯風格以及它們如何相互作用這很好。每個方格都是一個格子（<td>）。使單元格relative而divs absolute允許我們給它的座標相對於<td>邊緣。一旦定位在右下角，我們會給出一些動態內容，出現在:hover。當編輯:hover時，出現僞元素::before和::after。他們到是position版，但有relative的價值，因爲我們要::before和::after相對的字體移動到原來的位置，而不是到另一個position版元素（如與我們每個<td>和DIV以前一樣。

在div.pad的造型特別注意。

• position:absolute使我們能夠輕鬆地挑右下角。如果bottom:0和right:0把.pad緊貼進入彎道，然後我們可以繼續去forwar d爲負值，以便.pad位於單元格/表格邊界的中間位置。

• 添加了outline:2px solid white而不是border，因爲與邊框不同，outline寬度不會替換佈局中的其他元素。白色是混合到背景中，使得.pad的外觀更多地是表格的單獨但相關的組件。

• z-index:1也被給予.pad，以便從表格邊界清楚地定義白色輪廓。

其他的要點是：作了

• 的邊界，使它們被定義爲各自的屬性，但似乎作爲一個邊界（如border-collapse: collapse;），以避免斷開看border-collapse:separate給我們使用outline填寫border-spacing of 1px;如果我們只使用邊框，整個表格的尺寸會明顯增加。邊框和輪廓樣式爲inset，最後一個單元具有超大尺寸樣式outset，將其指定爲突出顯示。

代碼片段

table { 
 
    border-collapse: separate; 
 
    border-spacing: 1px; 
 
    border: 1px inset black; 
 
    outline: 1px inset black; 
 
    table-layout: fixed; 
 
    width: 80vw; 
 
    min-height: 150px; 
 
} 
 

 
td { 
 
border:1px solid black; 
 
outline: 1px inset black; 
 
} 
 

 
td:hover { 
 
    border: -3px inset black; 
 
    outline: 6px outset black; 
 
    position: relative; 
 
    z-index:1; 
 
    padding:1px; 
 
} 
 

 
.pad { 
 
    background: black; 
 
    cursor: pointer; 
 
    position: absolute; 
 
    height: 1px; 
 
    width: 1px; 
 
    z-index: 1; 
 
    bottom: -1px; 
 
    right: -1px; 
 
} 
 

 
td:hover .pad, 
 
.pad:hover { 
 
    border: 4px solid black; 
 
    bottom: -9px; 
 
    right: -9px; 
 
    outline: 2px solid white; 
 
    z-index:2; 
 
    padding:2px; 
 
} 
 

 
.pad:hover::before { 
 
    content: '\1f4c4'; 
 
    position: relative; 
 
    top: 20px; 
 
    left: 10px; 
 
    font-size: 1.2rem; 
 
    z-index:2; 
 
} 
 

 
.pad:hover::after { 
 
    content: '\2795'; 
 
    position: relative; 
 
    top: 16px; 
 
    left: 24px; 
 
    font-size: .7rem; 
 
    z-index:2; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class='pad'></div> 
 
     </td> 
 
     <td> 
 
     <div class='pad'></div> 
 
     </td> 
 
     <td> 
 
     <div class='pad'></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class='pad'></div> 
 
     </td> 
 
     <td> 
 
     <div class='pad'></div> 
 
     </td> 
 
     <td> 
 
     <div class='pad'></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class='pad'></div> 
 
     </td> 
 
     <td> 
 
     <div class='pad'></div> 
 
     </td> 
 
     <td> 
 
     <div class='pad'></div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>