[{"data":1,"prerenderedAt":1736},["ShallowReactive",2],{"blog-zh-zebra-striped-table-rows":3},{"id":4,"title":5,"author":6,"body":10,"date":1707,"description":1708,"draft":1709,"extension":1710,"howTo":1711,"image":1726,"meta":1727,"navigation":129,"path":1728,"seo":1729,"stem":1730,"tags":1731,"updated":1726,"__hash__":1735},"blogZh/zh/blog/019.zebra-striped-table-rows.md","如何在 gpdf 表格中添加斑马条纹行?",{"name":7,"url":8,"avatar":9},"Taiki Noda","https://nadai.dev/en/about","https://nadai.dev/og-default.png",{"type":11,"value":12,"toc":1696},"minimark",[13,17,34,37,104,107,110,1141,1147,1150,1161,1240,1243,1246,1249,1256,1333,1336,1347,1350,1357,1571,1574,1584,1587,1627,1630,1656,1660,1663,1680,1692],[14,15,16],"h2",{"id":16},"把问题换个说法",[18,19,20,21,25,26,33],"p",{},"我有一个表格 — 发票、流水、日志 — 行数超过 5 行后眼睛容易跳行。Bootstrap 里的 ",[22,23,24],"code",{},".table-striped"," 就是隔行加灰底,我想在 ",[27,28,32],"a",{"href":29,"rel":30},"https://github.com/gpdf-dev/gpdf",[31],"nofollow","gpdf"," 里也实现这个,但不想写行循环。",[14,35,36],{"id":36},"一句话答案",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-go shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","c.Table(header, rows, template.TableStripe(pdf.RGBHex(0xF5F5F5)))\n","go","",[22,45,46],{"__ignoreMap":43},[47,48,51,55,59,63,66,69,72,75,77,80,82,85,87,90,92,95,97,101],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sTEyZ","c",[47,56,58],{"class":57},"sMK4o",".",[47,60,62],{"class":61},"s2Zo4","Table",[47,64,65],{"class":57},"(",[47,67,68],{"class":53},"header",[47,70,71],{"class":57},",",[47,73,74],{"class":53}," rows",[47,76,71],{"class":57},[47,78,79],{"class":53}," template",[47,81,58],{"class":57},[47,83,84],{"class":61},"TableStripe",[47,86,65],{"class":57},[47,88,89],{"class":53},"pdf",[47,91,58],{"class":57},[47,93,94],{"class":61},"RGBHex",[47,96,65],{"class":57},[47,98,100],{"class":99},"sbssI","0xF5F5F5",[47,102,103],{"class":57},")))\n",[18,105,106],{},"就这一行。gpdf 负责交替着色。表头不在斑马条纹范围内,只对主体行生效:第 1 行保持白色,第 2 行加底色,第 3 行白色,第 4 行加底色,以此类推。",[14,108,109],{"id":109},"可运行的代码",[38,111,113],{"className":40,"code":112,"language":42,"meta":43,"style":43},"package main\n\nimport (\n    \"log\"\n    \"os\"\n\n    \"github.com/gpdf-dev/gpdf\"\n    \"github.com/gpdf-dev/gpdf/document\"\n    \"github.com/gpdf-dev/gpdf/pdf\"\n    \"github.com/gpdf-dev/gpdf/template\"\n)\n\nfunc main() {\n    doc := gpdf.NewDocument(\n        gpdf.WithPageSize(gpdf.A4),\n        gpdf.WithMargins(document.UniformEdges(document.Mm(20))),\n    )\n\n    brand := pdf.RGBHex(0x1A237E)     // 表头背景色\n    stripe := pdf.RGBHex(0xF5F5F5)    // 隔行底色\n\n    page := doc.AddPage()\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(12, func(c *template.ColBuilder) {\n            c.Text(\"Q1 销售汇总\", template.FontSize(20), template.Bold())\n            c.Spacer(document.Mm(4))\n\n            c.Table(\n                []string{\"产品\", \"区域\", \"数量\", \"销售额\"},\n                [][]string{\n                    {\"Laptop Pro 15\",  \"北美\",  \"120\", \"¥1,058,400\"},\n                    {\"Wireless Mouse\", \"欧洲\",  \"640\", \"¥130,560\"},\n                    {\"USB-C Hub\",      \"亚太\",  \"410\", \"¥139,400\"},\n                    {\"Monitor 27\\\"\",   \"北美\",  \"180\", \"¥489,600\"},\n                    {\"Keyboard\",       \"欧洲\",  \"320\", \"¥174,080\"},\n                    {\"Webcam HD\",      \"亚太\",  \"260\", \"¥159,120\"},\n                },\n                template.ColumnWidths(40, 20, 15, 25),\n                template.TableHeaderStyle(\n                    template.TextColor(pdf.White),\n                    template.BgColor(brand),\n                ),\n                template.TableStripe(stripe),\n            )\n        })\n    })\n\n    data, err := doc.Generate()\n    if err != nil {\n        log.Fatal(err)\n    }\n    if err := os.WriteFile(\"sales.pdf\", data, 0o644); err != nil {\n        log.Fatal(err)\n    }\n}\n",[22,114,115,124,131,141,153,163,168,178,188,198,208,214,219,234,254,277,314,320,325,352,375,380,399,432,468,516,542,547,558,609,620,663,704,746,790,831,871,877,910,922,944,961,967,983,989,995,1001,1006,1028,1044,1062,1068,1115,1130,1135],{"__ignoreMap":43},[47,116,117,120],{"class":49,"line":50},[47,118,119],{"class":57},"package",[47,121,123],{"class":122},"sBMFI"," main\n",[47,125,127],{"class":49,"line":126},2,[47,128,130],{"emptyLinePlaceholder":129},true,"\n",[47,132,134,138],{"class":49,"line":133},3,[47,135,137],{"class":136},"s7zQu","import",[47,139,140],{"class":57}," (\n",[47,142,144,147,150],{"class":49,"line":143},4,[47,145,146],{"class":57},"    \"",[47,148,149],{"class":122},"log",[47,151,152],{"class":57},"\"\n",[47,154,156,158,161],{"class":49,"line":155},5,[47,157,146],{"class":57},[47,159,160],{"class":122},"os",[47,162,152],{"class":57},[47,164,166],{"class":49,"line":165},6,[47,167,130],{"emptyLinePlaceholder":129},[47,169,171,173,176],{"class":49,"line":170},7,[47,172,146],{"class":57},[47,174,175],{"class":122},"github.com/gpdf-dev/gpdf",[47,177,152],{"class":57},[47,179,181,183,186],{"class":49,"line":180},8,[47,182,146],{"class":57},[47,184,185],{"class":122},"github.com/gpdf-dev/gpdf/document",[47,187,152],{"class":57},[47,189,191,193,196],{"class":49,"line":190},9,[47,192,146],{"class":57},[47,194,195],{"class":122},"github.com/gpdf-dev/gpdf/pdf",[47,197,152],{"class":57},[47,199,201,203,206],{"class":49,"line":200},10,[47,202,146],{"class":57},[47,204,205],{"class":122},"github.com/gpdf-dev/gpdf/template",[47,207,152],{"class":57},[47,209,211],{"class":49,"line":210},11,[47,212,213],{"class":57},")\n",[47,215,217],{"class":49,"line":216},12,[47,218,130],{"emptyLinePlaceholder":129},[47,220,222,225,228,231],{"class":49,"line":221},13,[47,223,224],{"class":57},"func",[47,226,227],{"class":61}," main",[47,229,230],{"class":57},"()",[47,232,233],{"class":57}," {\n",[47,235,237,240,243,246,248,251],{"class":49,"line":236},14,[47,238,239],{"class":53},"    doc ",[47,241,242],{"class":57},":=",[47,244,245],{"class":53}," gpdf",[47,247,58],{"class":57},[47,249,250],{"class":61},"NewDocument",[47,252,253],{"class":57},"(\n",[47,255,257,260,262,265,267,269,271,274],{"class":49,"line":256},15,[47,258,259],{"class":53},"        gpdf",[47,261,58],{"class":57},[47,263,264],{"class":61},"WithPageSize",[47,266,65],{"class":57},[47,268,32],{"class":53},[47,270,58],{"class":57},[47,272,273],{"class":53},"A4",[47,275,276],{"class":57},"),\n",[47,278,280,282,284,287,289,292,294,297,299,301,303,306,308,311],{"class":49,"line":279},16,[47,281,259],{"class":53},[47,283,58],{"class":57},[47,285,286],{"class":61},"WithMargins",[47,288,65],{"class":57},[47,290,291],{"class":53},"document",[47,293,58],{"class":57},[47,295,296],{"class":61},"UniformEdges",[47,298,65],{"class":57},[47,300,291],{"class":53},[47,302,58],{"class":57},[47,304,305],{"class":61},"Mm",[47,307,65],{"class":57},[47,309,310],{"class":99},"20",[47,312,313],{"class":57},"))),\n",[47,315,317],{"class":49,"line":316},17,[47,318,319],{"class":57},"    )\n",[47,321,323],{"class":49,"line":322},18,[47,324,130],{"emptyLinePlaceholder":129},[47,326,328,331,333,336,338,340,342,345,348],{"class":49,"line":327},19,[47,329,330],{"class":53},"    brand ",[47,332,242],{"class":57},[47,334,335],{"class":53}," pdf",[47,337,58],{"class":57},[47,339,94],{"class":61},[47,341,65],{"class":57},[47,343,344],{"class":99},"0x1A237E",[47,346,347],{"class":57},")",[47,349,351],{"class":350},"sHwdD","     // 表头背景色\n",[47,353,355,358,360,362,364,366,368,370,372],{"class":49,"line":354},20,[47,356,357],{"class":53},"    stripe ",[47,359,242],{"class":57},[47,361,335],{"class":53},[47,363,58],{"class":57},[47,365,94],{"class":61},[47,367,65],{"class":57},[47,369,100],{"class":99},[47,371,347],{"class":57},[47,373,374],{"class":350},"    // 隔行底色\n",[47,376,378],{"class":49,"line":377},21,[47,379,130],{"emptyLinePlaceholder":129},[47,381,383,386,388,391,393,396],{"class":49,"line":382},22,[47,384,385],{"class":53},"    page ",[47,387,242],{"class":57},[47,389,390],{"class":53}," doc",[47,392,58],{"class":57},[47,394,395],{"class":61},"AddPage",[47,397,398],{"class":57},"()\n",[47,400,402,405,407,410,413,417,420,423,425,428,430],{"class":49,"line":401},23,[47,403,404],{"class":53},"    page",[47,406,58],{"class":57},[47,408,409],{"class":61},"AutoRow",[47,411,412],{"class":57},"(func(",[47,414,416],{"class":415},"sHdIc","r",[47,418,419],{"class":57}," *",[47,421,422],{"class":122},"template",[47,424,58],{"class":57},[47,426,427],{"class":122},"RowBuilder",[47,429,347],{"class":57},[47,431,233],{"class":57},[47,433,435,438,440,443,445,448,450,453,455,457,459,461,464,466],{"class":49,"line":434},24,[47,436,437],{"class":53},"        r",[47,439,58],{"class":57},[47,441,442],{"class":61},"Col",[47,444,65],{"class":57},[47,446,447],{"class":99},"12",[47,449,71],{"class":57},[47,451,452],{"class":57}," func(",[47,454,54],{"class":415},[47,456,419],{"class":57},[47,458,422],{"class":122},[47,460,58],{"class":57},[47,462,463],{"class":122},"ColBuilder",[47,465,347],{"class":57},[47,467,233],{"class":57},[47,469,471,474,476,479,481,484,488,490,492,494,496,499,501,503,506,508,510,513],{"class":49,"line":470},25,[47,472,473],{"class":53},"            c",[47,475,58],{"class":57},[47,477,478],{"class":61},"Text",[47,480,65],{"class":57},[47,482,483],{"class":57},"\"",[47,485,487],{"class":486},"sfazB","Q1 销售汇总",[47,489,483],{"class":57},[47,491,71],{"class":57},[47,493,79],{"class":53},[47,495,58],{"class":57},[47,497,498],{"class":61},"FontSize",[47,500,65],{"class":57},[47,502,310],{"class":99},[47,504,505],{"class":57},"),",[47,507,79],{"class":53},[47,509,58],{"class":57},[47,511,512],{"class":61},"Bold",[47,514,515],{"class":57},"())\n",[47,517,519,521,523,526,528,530,532,534,536,539],{"class":49,"line":518},26,[47,520,473],{"class":53},[47,522,58],{"class":57},[47,524,525],{"class":61},"Spacer",[47,527,65],{"class":57},[47,529,291],{"class":53},[47,531,58],{"class":57},[47,533,305],{"class":61},[47,535,65],{"class":57},[47,537,538],{"class":99},"4",[47,540,541],{"class":57},"))\n",[47,543,545],{"class":49,"line":544},27,[47,546,130],{"emptyLinePlaceholder":129},[47,548,550,552,554,556],{"class":49,"line":549},28,[47,551,473],{"class":53},[47,553,58],{"class":57},[47,555,62],{"class":61},[47,557,253],{"class":57},[47,559,561,564,568,571,573,576,578,580,583,586,588,590,592,595,597,599,601,604,606],{"class":49,"line":560},29,[47,562,563],{"class":57},"                []",[47,565,567],{"class":566},"spNyl","string",[47,569,570],{"class":57},"{",[47,572,483],{"class":57},[47,574,575],{"class":486},"产品",[47,577,483],{"class":57},[47,579,71],{"class":57},[47,581,582],{"class":57}," \"",[47,584,585],{"class":486},"区域",[47,587,483],{"class":57},[47,589,71],{"class":57},[47,591,582],{"class":57},[47,593,594],{"class":486},"数量",[47,596,483],{"class":57},[47,598,71],{"class":57},[47,600,582],{"class":57},[47,602,603],{"class":486},"销售额",[47,605,483],{"class":57},[47,607,608],{"class":57},"},\n",[47,610,612,615,617],{"class":49,"line":611},30,[47,613,614],{"class":57},"                [][]",[47,616,567],{"class":566},[47,618,619],{"class":57},"{\n",[47,621,623,626,628,631,633,635,638,641,643,645,647,650,652,654,656,659,661],{"class":49,"line":622},31,[47,624,625],{"class":57},"                    {",[47,627,483],{"class":57},[47,629,630],{"class":486},"Laptop Pro 15",[47,632,483],{"class":57},[47,634,71],{"class":57},[47,636,637],{"class":57},"  \"",[47,639,640],{"class":486},"北美",[47,642,483],{"class":57},[47,644,71],{"class":57},[47,646,637],{"class":57},[47,648,649],{"class":486},"120",[47,651,483],{"class":57},[47,653,71],{"class":57},[47,655,582],{"class":57},[47,657,658],{"class":486},"¥1,058,400",[47,660,483],{"class":57},[47,662,608],{"class":57},[47,664,666,668,670,673,675,677,679,682,684,686,688,691,693,695,697,700,702],{"class":49,"line":665},32,[47,667,625],{"class":57},[47,669,483],{"class":57},[47,671,672],{"class":486},"Wireless Mouse",[47,674,483],{"class":57},[47,676,71],{"class":57},[47,678,582],{"class":57},[47,680,681],{"class":486},"欧洲",[47,683,483],{"class":57},[47,685,71],{"class":57},[47,687,637],{"class":57},[47,689,690],{"class":486},"640",[47,692,483],{"class":57},[47,694,71],{"class":57},[47,696,582],{"class":57},[47,698,699],{"class":486},"¥130,560",[47,701,483],{"class":57},[47,703,608],{"class":57},[47,705,707,709,711,714,716,718,721,724,726,728,730,733,735,737,739,742,744],{"class":49,"line":706},33,[47,708,625],{"class":57},[47,710,483],{"class":57},[47,712,713],{"class":486},"USB-C Hub",[47,715,483],{"class":57},[47,717,71],{"class":57},[47,719,720],{"class":57},"      \"",[47,722,723],{"class":486},"亚太",[47,725,483],{"class":57},[47,727,71],{"class":57},[47,729,637],{"class":57},[47,731,732],{"class":486},"410",[47,734,483],{"class":57},[47,736,71],{"class":57},[47,738,582],{"class":57},[47,740,741],{"class":486},"¥139,400",[47,743,483],{"class":57},[47,745,608],{"class":57},[47,747,749,751,753,756,759,761,763,766,768,770,772,774,777,779,781,783,786,788],{"class":49,"line":748},34,[47,750,625],{"class":57},[47,752,483],{"class":57},[47,754,755],{"class":486},"Monitor 27",[47,757,758],{"class":53},"\\\"",[47,760,483],{"class":57},[47,762,71],{"class":57},[47,764,765],{"class":57},"   \"",[47,767,640],{"class":486},[47,769,483],{"class":57},[47,771,71],{"class":57},[47,773,637],{"class":57},[47,775,776],{"class":486},"180",[47,778,483],{"class":57},[47,780,71],{"class":57},[47,782,582],{"class":57},[47,784,785],{"class":486},"¥489,600",[47,787,483],{"class":57},[47,789,608],{"class":57},[47,791,793,795,797,800,802,804,807,809,811,813,815,818,820,822,824,827,829],{"class":49,"line":792},35,[47,794,625],{"class":57},[47,796,483],{"class":57},[47,798,799],{"class":486},"Keyboard",[47,801,483],{"class":57},[47,803,71],{"class":57},[47,805,806],{"class":57},"       \"",[47,808,681],{"class":486},[47,810,483],{"class":57},[47,812,71],{"class":57},[47,814,637],{"class":57},[47,816,817],{"class":486},"320",[47,819,483],{"class":57},[47,821,71],{"class":57},[47,823,582],{"class":57},[47,825,826],{"class":486},"¥174,080",[47,828,483],{"class":57},[47,830,608],{"class":57},[47,832,834,836,838,841,843,845,847,849,851,853,855,858,860,862,864,867,869],{"class":49,"line":833},36,[47,835,625],{"class":57},[47,837,483],{"class":57},[47,839,840],{"class":486},"Webcam HD",[47,842,483],{"class":57},[47,844,71],{"class":57},[47,846,720],{"class":57},[47,848,723],{"class":486},[47,850,483],{"class":57},[47,852,71],{"class":57},[47,854,637],{"class":57},[47,856,857],{"class":486},"260",[47,859,483],{"class":57},[47,861,71],{"class":57},[47,863,582],{"class":57},[47,865,866],{"class":486},"¥159,120",[47,868,483],{"class":57},[47,870,608],{"class":57},[47,872,874],{"class":49,"line":873},37,[47,875,876],{"class":57},"                },\n",[47,878,880,883,885,888,890,893,895,898,900,903,905,908],{"class":49,"line":879},38,[47,881,882],{"class":53},"                template",[47,884,58],{"class":57},[47,886,887],{"class":61},"ColumnWidths",[47,889,65],{"class":57},[47,891,892],{"class":99},"40",[47,894,71],{"class":57},[47,896,897],{"class":99}," 20",[47,899,71],{"class":57},[47,901,902],{"class":99}," 15",[47,904,71],{"class":57},[47,906,907],{"class":99}," 25",[47,909,276],{"class":57},[47,911,913,915,917,920],{"class":49,"line":912},39,[47,914,882],{"class":53},[47,916,58],{"class":57},[47,918,919],{"class":61},"TableHeaderStyle",[47,921,253],{"class":57},[47,923,925,928,930,933,935,937,939,942],{"class":49,"line":924},40,[47,926,927],{"class":53},"                    template",[47,929,58],{"class":57},[47,931,932],{"class":61},"TextColor",[47,934,65],{"class":57},[47,936,89],{"class":53},[47,938,58],{"class":57},[47,940,941],{"class":53},"White",[47,943,276],{"class":57},[47,945,947,949,951,954,956,959],{"class":49,"line":946},41,[47,948,927],{"class":53},[47,950,58],{"class":57},[47,952,953],{"class":61},"BgColor",[47,955,65],{"class":57},[47,957,958],{"class":53},"brand",[47,960,276],{"class":57},[47,962,964],{"class":49,"line":963},42,[47,965,966],{"class":57},"                ),\n",[47,968,970,972,974,976,978,981],{"class":49,"line":969},43,[47,971,882],{"class":53},[47,973,58],{"class":57},[47,975,84],{"class":61},[47,977,65],{"class":57},[47,979,980],{"class":53},"stripe",[47,982,276],{"class":57},[47,984,986],{"class":49,"line":985},44,[47,987,988],{"class":57},"            )\n",[47,990,992],{"class":49,"line":991},45,[47,993,994],{"class":57},"        })\n",[47,996,998],{"class":49,"line":997},46,[47,999,1000],{"class":57},"    })\n",[47,1002,1004],{"class":49,"line":1003},47,[47,1005,130],{"emptyLinePlaceholder":129},[47,1007,1009,1012,1014,1017,1019,1021,1023,1026],{"class":49,"line":1008},48,[47,1010,1011],{"class":53},"    data",[47,1013,71],{"class":57},[47,1015,1016],{"class":53}," err ",[47,1018,242],{"class":57},[47,1020,390],{"class":53},[47,1022,58],{"class":57},[47,1024,1025],{"class":61},"Generate",[47,1027,398],{"class":57},[47,1029,1031,1034,1036,1039,1042],{"class":49,"line":1030},49,[47,1032,1033],{"class":136},"    if",[47,1035,1016],{"class":53},[47,1037,1038],{"class":57},"!=",[47,1040,1041],{"class":57}," nil",[47,1043,233],{"class":57},[47,1045,1047,1050,1052,1055,1057,1060],{"class":49,"line":1046},50,[47,1048,1049],{"class":53},"        log",[47,1051,58],{"class":57},[47,1053,1054],{"class":61},"Fatal",[47,1056,65],{"class":57},[47,1058,1059],{"class":53},"err",[47,1061,213],{"class":57},[47,1063,1065],{"class":49,"line":1064},51,[47,1066,1067],{"class":57},"    }\n",[47,1069,1071,1073,1075,1077,1080,1082,1085,1087,1089,1092,1094,1096,1099,1101,1104,1107,1109,1111,1113],{"class":49,"line":1070},52,[47,1072,1033],{"class":136},[47,1074,1016],{"class":53},[47,1076,242],{"class":57},[47,1078,1079],{"class":53}," os",[47,1081,58],{"class":57},[47,1083,1084],{"class":61},"WriteFile",[47,1086,65],{"class":57},[47,1088,483],{"class":57},[47,1090,1091],{"class":486},"sales.pdf",[47,1093,483],{"class":57},[47,1095,71],{"class":57},[47,1097,1098],{"class":53}," data",[47,1100,71],{"class":57},[47,1102,1103],{"class":99}," 0o644",[47,1105,1106],{"class":57},");",[47,1108,1016],{"class":53},[47,1110,1038],{"class":57},[47,1112,1041],{"class":57},[47,1114,233],{"class":57},[47,1116,1118,1120,1122,1124,1126,1128],{"class":49,"line":1117},53,[47,1119,1049],{"class":53},[47,1121,58],{"class":57},[47,1123,1054],{"class":61},[47,1125,65],{"class":57},[47,1127,1059],{"class":53},[47,1129,213],{"class":57},[47,1131,1133],{"class":49,"line":1132},54,[47,1134,1067],{"class":57},[47,1136,1138],{"class":49,"line":1137},55,[47,1139,1140],{"class":57},"}\n",[18,1142,1143,1146],{},[22,1144,1145],{},"go run main.go"," 即可。主体 6 行中有 3 行带底色,表头深蓝白字。这就是周一邮件里发出去的报表样式。",[14,1148,1149],{"id":1149},"交替着色的原理",[18,1151,1152,1153,1156,1157,1160],{},"内部上,gpdf 用从 0 开始的下标 ",[22,1154,1155],{},"i"," 遍历主体行,只对 ",[22,1158,1159],{},"i%2 == 1"," 的行涂条纹色。表头是单独的切片,不参与计数。",[1162,1163,1164,1180],"table",{},[1165,1166,1167],"thead",{},[1168,1169,1170,1174,1177],"tr",{},[1171,1172,1173],"th",{},"主体行下标 (从 0 开始)",[1171,1175,1176],{},"视觉位置",[1171,1178,1179],{},"是否带条纹?",[1181,1182,1183,1195,1209,1219,1231],"tbody",{},[1168,1184,1185,1189,1192],{},[1186,1187,1188],"td",{},"0",[1186,1190,1191],{},"第 1 行",[1186,1193,1194],{},"否",[1168,1196,1197,1200,1203],{},[1186,1198,1199],{},"1",[1186,1201,1202],{},"第 2 行",[1186,1204,1205],{},[1206,1207,1208],"strong",{},"是",[1168,1210,1211,1214,1217],{},[1186,1212,1213],{},"2",[1186,1215,1216],{},"第 3 行",[1186,1218,1194],{},[1168,1220,1221,1224,1227],{},[1186,1222,1223],{},"3",[1186,1225,1226],{},"第 4 行",[1186,1228,1229],{},[1206,1230,1208],{},[1168,1232,1233,1236,1238],{},[1186,1234,1235],{},"...",[1186,1237,1235],{},[1186,1239,1235],{},[18,1241,1242],{},"这套奇偶规则跟 Bootstrap 一致。第一行干净,条纹是视觉\"换气\",白行—浅色行—白行,眼睛自然跳跃。",[18,1244,1245],{},"没有反转奇偶的开关(让奇数行带色)。如果非要反过来,可以在主体最前插一空行 — 但其实没人想要这种效果。",[14,1247,1248],{"id":1248},"颜色怎么选",[18,1250,1251,1252,1255],{},"条纹的关键在于 ",[1206,1253,1254],{},"不抢眼","。一旦颜色和正文抢注意力,条纹就失去意义。",[38,1257,1259],{"className":40,"code":1258,"language":42,"meta":43,"style":43},"pdf.RGBHex(0xF5F5F5) // 柔和暖灰,Bootstrap 默认色附近\npdf.RGBHex(0xFAFAFA) // 更淡,小字号下几乎看不出\npdf.RGBHex(0xEEF2FF) // 品牌色的极浅版本(表头是品牌色时最合适)\npdf.Gray(0.96)       // 灰度版本,PDF/A 输出时省几个字节\n",[22,1260,1261,1278,1296,1314],{"__ignoreMap":43},[47,1262,1263,1265,1267,1269,1271,1273,1275],{"class":49,"line":50},[47,1264,89],{"class":53},[47,1266,58],{"class":57},[47,1268,94],{"class":61},[47,1270,65],{"class":57},[47,1272,100],{"class":99},[47,1274,347],{"class":57},[47,1276,1277],{"class":350}," // 柔和暖灰,Bootstrap 默认色附近\n",[47,1279,1280,1282,1284,1286,1288,1291,1293],{"class":49,"line":126},[47,1281,89],{"class":53},[47,1283,58],{"class":57},[47,1285,94],{"class":61},[47,1287,65],{"class":57},[47,1289,1290],{"class":99},"0xFAFAFA",[47,1292,347],{"class":57},[47,1294,1295],{"class":350}," // 更淡,小字号下几乎看不出\n",[47,1297,1298,1300,1302,1304,1306,1309,1311],{"class":49,"line":133},[47,1299,89],{"class":53},[47,1301,58],{"class":57},[47,1303,94],{"class":61},[47,1305,65],{"class":57},[47,1307,1308],{"class":99},"0xEEF2FF",[47,1310,347],{"class":57},[47,1312,1313],{"class":350}," // 品牌色的极浅版本(表头是品牌色时最合适)\n",[47,1315,1316,1318,1320,1323,1325,1328,1330],{"class":49,"line":143},[47,1317,89],{"class":53},[47,1319,58],{"class":57},[47,1321,1322],{"class":61},"Gray",[47,1324,65],{"class":57},[47,1326,1327],{"class":99},"0.96",[47,1329,347],{"class":57},[47,1331,1332],{"class":350},"       // 灰度版本,PDF/A 输出时省几个字节\n",[18,1334,1335],{},"避免高饱和度。60% 饱和度的蓝条纹会被读成\"这一行被选中/重要\",视线反而被钉住,与斑马条纹\"帮助跨行扫读\"的目的相反。",[18,1337,1338,1339,1342,1343,1346],{},"少数深色主题(幻灯片样式的报表偶尔有)可以在 ",[22,1340,1341],{},"0x1A1A1A"," 页面上用 ",[22,1344,1345],{},"pdf.RGBHex(0x202020)","。低对比度的原则不变。",[14,1348,1349],{"id":1349},"与单元格边框组合",[18,1351,1352,1353,1356],{},"短表格用条纹就够了。财务类高密度表格,推荐配合 ",[22,1354,1355],{},"WithTableCellBorder"," 在每个单元格之间画细线:",[38,1358,1360],{"className":40,"code":1359,"language":42,"meta":43,"style":43},"hairline := template.Border(\n    template.BorderWidth(document.Pt(0.5)),\n    template.BorderColor(pdf.Gray(0.85)),\n)\n\nc.Table(header, rows,\n    template.ColumnWidths(40, 20, 15, 25),\n    template.TableHeaderStyle(\n        template.TextColor(pdf.White),\n        template.BgColor(brand),\n    ),\n    template.TableStripe(pdf.RGBHex(0xF5F5F5)),\n    template.WithTableCellBorder(hairline),\n)\n",[22,1361,1362,1378,1405,1429,1433,1437,1456,1482,1492,1511,1525,1530,1552,1567],{"__ignoreMap":43},[47,1363,1364,1367,1369,1371,1373,1376],{"class":49,"line":50},[47,1365,1366],{"class":53},"hairline ",[47,1368,242],{"class":57},[47,1370,79],{"class":53},[47,1372,58],{"class":57},[47,1374,1375],{"class":61},"Border",[47,1377,253],{"class":57},[47,1379,1380,1383,1385,1388,1390,1392,1394,1397,1399,1402],{"class":49,"line":126},[47,1381,1382],{"class":53},"    template",[47,1384,58],{"class":57},[47,1386,1387],{"class":61},"BorderWidth",[47,1389,65],{"class":57},[47,1391,291],{"class":53},[47,1393,58],{"class":57},[47,1395,1396],{"class":61},"Pt",[47,1398,65],{"class":57},[47,1400,1401],{"class":99},"0.5",[47,1403,1404],{"class":57},")),\n",[47,1406,1407,1409,1411,1414,1416,1418,1420,1422,1424,1427],{"class":49,"line":133},[47,1408,1382],{"class":53},[47,1410,58],{"class":57},[47,1412,1413],{"class":61},"BorderColor",[47,1415,65],{"class":57},[47,1417,89],{"class":53},[47,1419,58],{"class":57},[47,1421,1322],{"class":61},[47,1423,65],{"class":57},[47,1425,1426],{"class":99},"0.85",[47,1428,1404],{"class":57},[47,1430,1431],{"class":49,"line":143},[47,1432,213],{"class":57},[47,1434,1435],{"class":49,"line":155},[47,1436,130],{"emptyLinePlaceholder":129},[47,1438,1439,1441,1443,1445,1447,1449,1451,1453],{"class":49,"line":165},[47,1440,54],{"class":53},[47,1442,58],{"class":57},[47,1444,62],{"class":61},[47,1446,65],{"class":57},[47,1448,68],{"class":53},[47,1450,71],{"class":57},[47,1452,74],{"class":53},[47,1454,1455],{"class":57},",\n",[47,1457,1458,1460,1462,1464,1466,1468,1470,1472,1474,1476,1478,1480],{"class":49,"line":170},[47,1459,1382],{"class":53},[47,1461,58],{"class":57},[47,1463,887],{"class":61},[47,1465,65],{"class":57},[47,1467,892],{"class":99},[47,1469,71],{"class":57},[47,1471,897],{"class":99},[47,1473,71],{"class":57},[47,1475,902],{"class":99},[47,1477,71],{"class":57},[47,1479,907],{"class":99},[47,1481,276],{"class":57},[47,1483,1484,1486,1488,1490],{"class":49,"line":180},[47,1485,1382],{"class":53},[47,1487,58],{"class":57},[47,1489,919],{"class":61},[47,1491,253],{"class":57},[47,1493,1494,1497,1499,1501,1503,1505,1507,1509],{"class":49,"line":190},[47,1495,1496],{"class":53},"        template",[47,1498,58],{"class":57},[47,1500,932],{"class":61},[47,1502,65],{"class":57},[47,1504,89],{"class":53},[47,1506,58],{"class":57},[47,1508,941],{"class":53},[47,1510,276],{"class":57},[47,1512,1513,1515,1517,1519,1521,1523],{"class":49,"line":200},[47,1514,1496],{"class":53},[47,1516,58],{"class":57},[47,1518,953],{"class":61},[47,1520,65],{"class":57},[47,1522,958],{"class":53},[47,1524,276],{"class":57},[47,1526,1527],{"class":49,"line":210},[47,1528,1529],{"class":57},"    ),\n",[47,1531,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550],{"class":49,"line":216},[47,1533,1382],{"class":53},[47,1535,58],{"class":57},[47,1537,84],{"class":61},[47,1539,65],{"class":57},[47,1541,89],{"class":53},[47,1543,58],{"class":57},[47,1545,94],{"class":61},[47,1547,65],{"class":57},[47,1549,100],{"class":99},[47,1551,1404],{"class":57},[47,1553,1554,1556,1558,1560,1562,1565],{"class":49,"line":221},[47,1555,1382],{"class":53},[47,1557,58],{"class":57},[47,1559,1355],{"class":61},[47,1561,65],{"class":57},[47,1563,1564],{"class":53},"hairline",[47,1566,276],{"class":57},[47,1568,1569],{"class":49,"line":236},[47,1570,213],{"class":57},[18,1572,1573],{},"细线 + 浅条纹 = 财务部打印预览的经典样式。边框颜色一定要比条纹更浅,这样条纹仍然是主信号、边框只是辅助。",[18,1575,1576,1577,1579,1580,1583],{},"只想要外边框、不要内部网格的话,把 ",[22,1578,1355],{}," 换成 ",[22,1581,1582],{},"WithTableBorder","。",[14,1585,1586],{"id":1586},"容易浪费十分钟的坑",[1588,1589,1590,1603,1615,1621],"ul",{},[1591,1592,1593,1583,1596,1599,1600,1583],"li",{},[1206,1594,1595],{},"颜色取值范围搞错",[22,1597,1598],{},"pdf.RGB(245, 245, 245)"," 会变成纯黑色块。构造函数要求 0.0–1.0,而不是 0–255。习惯 CSS 写法的话用 ",[22,1601,1602],{},"pdf.RGBHex(0xF5F5F5)",[1591,1604,1605,1583,1608,1610,1611,1614],{},[1206,1606,1607],{},"想给表头加条纹",[22,1609,84],{}," 不影响表头。要给表头加底色应该用 ",[22,1612,1613],{},"TableHeaderStyle(template.BgColor(...))",",这是另一个选项。混淆这两个、然后纳闷\"表头怎么没颜色\",是最经典的初次踩坑。",[1591,1616,1617,1620],{},[1206,1618,1619],{},"想要双色交替","。gpdf 只接受一个条纹色,没有 white → gray → blue 三色循环。这不是功能限制,而是有意为之 — 三色斑马只会让读者更累。",[1591,1622,1623,1626],{},[1206,1624,1625],{},"3 行的小表格也加条纹","。斑马条纹至少需要 4–5 行才有效。2–3 行加上去,只会让人以为\"某一格被选中\"。短表格直接不要条纹。",[14,1628,1629],{"id":1629},"相关菜谱",[1588,1631,1632,1642,1649],{},[1591,1633,1634,1638,1639,1641],{},[27,1635,1637],{"href":1636},"/zh/blog/table-column-widths","如何为表格设置自定义列宽?"," — ",[22,1640,887],{}," 详解。",[1591,1643,1644,1648],{},[27,1645,1647],{"href":1646},"/zh/blog/add-custom-truetype-font","如何在 gpdf 中加载自定义 TrueType 字体?"," — 用品牌字体渲染条纹表。",[1591,1650,1651,1655],{},[27,1652,1654],{"href":1653},"/zh/blog/invoice-pdf-go-under-50-lines","用 Go 在 50 行内生成发票 PDF"," — 包含表头样式、条纹、合计行的实战示例。",[14,1657,1659],{"id":1658},"试试-gpdf","试试 gpdf",[18,1661,1662],{},"gpdf 是一个用纯 Go 写的 PDF 生成库,MIT 许可、零外部依赖、原生 TrueType 处理。",[38,1664,1668],{"className":1665,"code":1666,"language":1667,"meta":43,"style":43},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","go get github.com/gpdf-dev/gpdf\n","bash",[22,1669,1670],{"__ignoreMap":43},[47,1671,1672,1674,1677],{"class":49,"line":50},[47,1673,42],{"class":122},[47,1675,1676],{"class":486}," get",[47,1678,1679],{"class":486}," github.com/gpdf-dev/gpdf\n",[18,1681,1682,1686,1687],{},[27,1683,1685],{"href":29,"rel":1684},[31],"⭐ 在 GitHub 加星"," · ",[27,1688,1691],{"href":1689,"rel":1690},"https://gpdf.dev/zh/docs/quickstart",[31],"阅读文档",[1693,1694,1695],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":43,"searchDepth":126,"depth":126,"links":1697},[1698,1699,1700,1701,1702,1703,1704,1705,1706],{"id":16,"depth":126,"text":16},{"id":36,"depth":126,"text":36},{"id":109,"depth":126,"text":109},{"id":1149,"depth":126,"text":1149},{"id":1248,"depth":126,"text":1248},{"id":1349,"depth":126,"text":1349},{"id":1586,"depth":126,"text":1586},{"id":1629,"depth":126,"text":1629},{"id":1658,"depth":126,"text":1659},"2026-05-04","传入 template.TableStripe 即可,gpdf 会自动给隔行涂上你指定的背景色,不用写循环、也不用逐格设置样式。",false,"md",{"name":1712,"totalTime":1713,"tools":1714,"steps":1716},"为 gpdf 表格添加斑马条纹","PT5M",[1715,175],"Go 1.22+",[1717,1720,1723],{"name":1718,"text":1719},"选择条纹颜色","用 pdf.RGBHex(0xF5F5F5) 得到柔和灰色,或者用 pdf.RGB(r, g, b) 传入 0.0–1.0 之间的值。颜色越淡越好,只要不影响正文阅读即可。",{"name":1721,"text":1722},"在 Table 调用中传入 template.TableStripe","在列里调用 c.Table(header, rows, template.TableStripe(stripeColor)),gpdf 会遍历表格主体行,每隔一行涂上颜色。",{"name":1724,"text":1725},"搭配 TableHeaderStyle 制造对比","加上 template.TableHeaderStyle(template.TextColor(pdf.White), template.BgColor(brand)),让表头与条纹主体在视觉上分离,条纹效果才完整。",null,{},"/zh/blog/zebra-striped-table-rows",{"title":5,"description":1708},"zh/blog/019.zebra-striped-table-rows",[1732,1733,1734],"recipe","tutorial","templates","3QbrYfAfge2NfitSN_FFtgyNserGIxzanG57VVpqkyQ",1779199016756]