CSS表格最右邊一列固定在右邊是一個非常有用的功能,可以使表格更加美觀和易于閱讀。使用CSS,您可以輕松地實現這個功能。
table { width: 100%; table-layout: fixed; border-collapse: collapse; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th:last-child, td:last-child { position: sticky; right: 0; background-color: #fff; box-shadow: 1px 0 0 #ddd; }
在上面的代碼中,我們首先將表格的寬度設置為100%,使其充滿整個屏幕。接下來,我們使用table-layout: fixed屬性來指定表格的布局,這會使表格的每一列都具有相同的寬度。
在th和td元素中,我們設置了padding、text-align和border屬性,以使表格看起來更加美觀。
最后,我們使用:last-child選擇器來選中表格中的最后一列。然后,我們使用position: sticky來將該列固定在右側。我們還使用right: 0將其放置在表格的右側,并使用background-color和box-shadow屬性來使它與其他列區分開來。
通過這些簡單的CSS代碼,您可以輕松地將表格的最后一列固定在右側,從而使表格更加易于閱讀和使用。
下一篇css插入的圖片平鋪