SharePoint Online列表格式 [英] SharePoint Online list formatting

问题描述

我创建了SharePoint列表 在Office 365中，我想添加边框（垂直线）列表列。有谁能建议我实现这个目标的最佳方式？

I have created SharePoint list  in Office 365 and I want to add borders(vertical lines) to list columns. Can anyone suggest me the best way to achieve this?

谢谢。

推荐答案

您好

检查以下代码，将网格线添加到列表视图中，

Check below code to add grid lines to your list view,

<style>
 /* ---------- Table Rows ----------*/
 /* Set background for every row */
 .ms-listviewtable > tbody > tr {
 background: white;
 }
 /* Set border for every row */
 .ms-listviewtable > tbody > tr td{
 border-bottom: 1px solid #AFAFAF !important; /* !important needed over override
SharePoint inline style */
 border-left: 1px solid #AFAFAF !important;
 border-right: 1px solid #AFAFAF !important;
 }
 /* Set background for every alternating row */
 .ms-listviewtable > tbody > tr.ms-alternating {
 background: #E2E3E5;
 }
 /* ---------- Table Header Row ----------*/
 /* Remove background set in SharePoint's general data table style */
 .ms-listviewtable tr.ms-viewheadertr {
 background: transparent;
 }
 /* Modify background color */
 tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
 tr.ms-viewheadertr > th.ms-vh, /* Text */
 tr.ms-viewheadertr > th.ms-vh2,
 tr.ms-viewheadertr > th /* Text */ {
 background: #2E4C70;
 }
 /* Modify background color on hover */
 tr.ms-viewheadertr > th.ms-vh:hover,
 tr.ms-viewheadertr > th.ms-vh2:hover,
 tr.ms-viewheadertr > th {
 background-color: #273C51;
 border-color: #273C51;
 }
 /* Modify font color */
 .ms-viewheadertr a,
 .ms-viewheadertr div {
 color: white;
 }
 /* Modify font color on hover */
 .ms-viewheadertr a:hover,
 .ms-viewheadertr div:hover {
 color: white;
 }
 tr.ms-viewheadertr > th.ms-vh-icon:last-child {
 display:none;
 }
</style>

参考链接：  http://ksessions.com/lines_between_columns.pdf

Ref Link: http://ksessions.com/lines_between_columns.pdf

谢谢

这篇关于SharePoint Online列表格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！