當我們需要在一個網頁中展示一個表格時,我們通常可以使用<table>標簽和<tr>和<td>標簽來實現。但是,如果我們需要在彈出框中展示一個表格,我們就需要使用一些特殊的CSS來確保表格能夠正確地展示。
.popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background-color: white; border: 1px solid black; overflow-y: auto; } .popup table { border-collapse: collapse; width: 100%; } .popup table th, .popup table td { padding: 10px; text-align: center; border: 1px solid black; } .popup table th { background-color: #CCC; }
以上是實現彈出框中包含表格的CSS代碼。首先,在彈出框的容器上添加了一個名為.popup的類。該類使用了position:fixed來確保彈出框始終呈現在屏幕的中央位置;使用了width和height屬性來指定彈出框的尺寸;使用了background-color和border屬性來設置彈出框的背景色和邊框樣式;使用了overflow-y: auto屬性來確保當內容超出彈出框的高度時,能夠出現滾動條。
接下來,對表格使用了一些特殊的CSS樣式。這些樣式包括border-collapse:collapse來確保表格的邊框呈現為一體;width:100%來確保表格寬度與彈出框容器寬度相等;padding:10px和text-align:center來設置表格中內容的樣式;border:1px solid black來設置表格內元素的邊框樣式;background-color:#CCC來設置表格頭部單元格的背景色。
使用以上CSS代碼,我們就可以實現一個包含表格的彈出框。當需要顯示表格時,只需要將表格代碼放置在.popup容器內即可。
上一篇jquery .on
下一篇弧形的標簽CSS