[{"data":1,"prerenderedAt":1742},["ShallowReactive",2],{"blog-ja-zebra-striped-table-rows":3},{"id":4,"title":5,"author":6,"body":10,"date":1713,"description":1714,"draft":1715,"extension":1716,"howTo":1717,"image":1732,"meta":1733,"navigation":129,"path":1734,"seo":1735,"stem":1736,"tags":1737,"updated":1732,"__hash__":1741},"blogJa/ja/blog/019.zebra-striped-table-rows.md","gpdf でテーブルに縞模様(ゼブラ)の行を入れるには?",{"name":7,"url":8,"avatar":9},"野田大貴","https://nadai.dev/ja/about","https://nadai.dev/og-default.png",{"type":11,"value":12,"toc":1702},"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,1588,1633,1636,1662,1666,1669,1686,1698],[14,15,16],"h2",{"id":16},"質問を言い換えると",[18,19,20,21,25,26,33],"p",{},"請求書、取引履歴、ログ — 5 行を超えるテーブルを描くと、目線が次の行を見失う。Bootstrap で言う ",[22,23,24],"code",{},".table-striped","、つまり 1 行おきにグレーが乗る縞模様を ",[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)    // 1 行おきの縞\n\n    page := doc.AddPage()\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(12, func(c *template.ColBuilder) {\n            c.Text(\"第 1 四半期 売上\", template.FontSize(20), template.Bold())\n            c.Spacer(document.Mm(4))\n\n            c.Table(\n                []string{\"商品\", \"地域\", \"数量\", \"売上\"},\n                [][]string{\n                    {\"Laptop Pro 15\",  \"国内\",  \"120\", \"¥15,580,000\"},\n                    {\"Wireless Mouse\", \"EU\",   \"640\", \"¥1,920,000\"},\n                    {\"USB-C Hub\",      \"APAC\", \"410\", \"¥2,050,000\"},\n                    {\"Monitor 27\\\"\",   \"国内\",  \"180\", \"¥7,200,000\"},\n                    {\"Keyboard\",       \"EU\",   \"320\", \"¥2,560,000\"},\n                    {\"Webcam HD\",      \"APAC\", \"260\", \"¥2,340,000\"},\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,705,747,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},"    // 1 行おきの縞\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","第 1 四半期 売上",[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},"¥15,580,000",[47,660,483],{"class":57},[47,662,608],{"class":57},[47,664,666,668,670,673,675,677,679,682,684,686,689,692,694,696,698,701,703],{"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},"EU",[47,683,483],{"class":57},[47,685,71],{"class":57},[47,687,688],{"class":57},"   \"",[47,690,691],{"class":486},"640",[47,693,483],{"class":57},[47,695,71],{"class":57},[47,697,582],{"class":57},[47,699,700],{"class":486},"¥1,920,000",[47,702,483],{"class":57},[47,704,608],{"class":57},[47,706,708,710,712,715,717,719,722,725,727,729,731,734,736,738,740,743,745],{"class":49,"line":707},33,[47,709,625],{"class":57},[47,711,483],{"class":57},[47,713,714],{"class":486},"USB-C Hub",[47,716,483],{"class":57},[47,718,71],{"class":57},[47,720,721],{"class":57},"      \"",[47,723,724],{"class":486},"APAC",[47,726,483],{"class":57},[47,728,71],{"class":57},[47,730,582],{"class":57},[47,732,733],{"class":486},"410",[47,735,483],{"class":57},[47,737,71],{"class":57},[47,739,582],{"class":57},[47,741,742],{"class":486},"¥2,050,000",[47,744,483],{"class":57},[47,746,608],{"class":57},[47,748,750,752,754,757,760,762,764,766,768,770,772,774,777,779,781,783,786,788],{"class":49,"line":749},34,[47,751,625],{"class":57},[47,753,483],{"class":57},[47,755,756],{"class":486},"Monitor 27",[47,758,759],{"class":53},"\\\"",[47,761,483],{"class":57},[47,763,71],{"class":57},[47,765,688],{"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},"¥7,200,000",[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,688],{"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},"¥2,560,000",[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,721],{"class":57},[47,848,724],{"class":486},[47,850,483],{"class":57},[47,852,71],{"class":57},[47,854,582],{"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},"¥2,340,000",[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 行に色が入り、ヘッダーは紺地に白文字。月曜の朝に Slack に貼られる、あの形。",[14,1148,1149],{"id":1149},"交互配色の仕組み",[18,1151,1152,1153,1156,1157,1160],{},"内部では、ボディ行を ",[22,1154,1155],{},"i"," (0 始まり) で走査し、",[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 と同じパリティ。1 行目はクリーンで、縞は視覚的な「休符」として効く。白の行を読み、次は薄く色がついた行、また白、と目が跳ねる。",[18,1244,1245],{},"パリティを反転させる(奇数行ではなく偶数行に色を入れる)オプションはない。どうしても反転したいなら body の先頭に空行を足す手はあるが、まずやらない。誰も望んでいない見た目になる。",[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],{},"ヘアライン + 薄い縞 = 経理が出してくる Excel 印刷プレビューの定番フォーマット。罫線は縞より薄くする。縞が主役で罫線は補助、の順序を崩さない。",[18,1575,1576,1577,1579,1580,1583],{},"外枠だけ欲しければ ",[22,1578,1355],{}," の代わりに ",[22,1581,1582],{},"WithTableBorder"," を使う。",[14,1585,1587],{"id":1586},"_10-分溶かす落とし穴","10 分溶かす落とし穴",[1589,1590,1591,1605,1617,1627],"ul",{},[1592,1593,1594,1597,1598,1601,1602,1583],"li",{},[1206,1595,1596],{},"色の値域を間違える","。",[22,1599,1600],{},"pdf.RGB(245, 245, 245)"," は真っ黒になる。コンストラクタは 0.0〜1.0 を要求する。CSS 感覚で書きたいなら ",[22,1603,1604],{},"pdf.RGBHex(0xF5F5F5)",[1592,1606,1607,1597,1610,1612,1613,1616],{},[1206,1608,1609],{},"ヘッダーに縞をかけようとする",[22,1611,84],{}," はヘッダーに触れない。ヘッダーに色を入れたいなら ",[22,1614,1615],{},"TableHeaderStyle(template.BgColor(...))"," で別物。これを混同して「ヘッダーに色が乗らない」と数十分悩むのはあるあるだ。",[1592,1618,1619,1622,1623,1626],{},[1206,1620,1621],{},"2 色交互にしたい","。gpdf は縞色を 1 つしか取らない。",[22,1624,1625],{},"white → gray → blue"," の 3 色ローテーションは仕様にない。実装すれば書けるが、読みづらいだけなので入れていない。",[1592,1628,1629,1632],{},[1206,1630,1631],{},"3 行のテーブルに縞を入れる","。縞模様は 4〜5 行以上ないと効果が出ない。2〜3 行だと「1 セルだけ選択された」ように見える。素直に縞なしにする。",[14,1634,1635],{"id":1635},"関連レシピ",[1589,1637,1638,1648,1655],{},[1592,1639,1640,1644,1645,1647],{},[27,1641,1643],{"href":1642},"/ja/blog/table-column-widths","テーブルの列幅をカスタマイズするには?"," — ",[22,1646,887],{}," の詳細。",[1592,1649,1650,1654],{},[27,1651,1653],{"href":1652},"/ja/blog/add-custom-truetype-font","gpdf にカスタム TrueType フォントを登録するには?"," — 縞テーブルをブランドフォントで描く。",[1592,1656,1657,1661],{},[27,1658,1660],{"href":1659},"/ja/blog/invoice-pdf-go-under-50-lines","Go で 50 行未満の請求書 PDF"," — ヘッダー、縞、合計行を入れた実用テーブル。",[14,1663,1665],{"id":1664},"gpdf-を使ってみる","gpdf を使ってみる",[18,1667,1668],{},"gpdf は Go の PDF 生成ライブラリ。MIT、ゼロ依存、純 Go の TrueType 処理。",[38,1670,1674],{"className":1671,"code":1672,"language":1673,"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,1675,1676],{"__ignoreMap":43},[47,1677,1678,1680,1683],{"class":49,"line":50},[47,1679,42],{"class":122},[47,1681,1682],{"class":486}," get",[47,1684,1685],{"class":486}," github.com/gpdf-dev/gpdf\n",[18,1687,1688,1692,1693],{},[27,1689,1691],{"href":29,"rel":1690},[31],"⭐ Star on GitHub"," · ",[27,1694,1697],{"href":1695,"rel":1696},"https://gpdf.dev/ja/docs/quickstart",[31],"ドキュメントを読む",[1699,1700,1701],"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":1703},[1704,1705,1706,1707,1708,1709,1710,1711,1712],{"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":1587},{"id":1635,"depth":126,"text":1635},{"id":1664,"depth":126,"text":1665},"2026-05-04","template.TableStripe を渡すだけ。gpdf が偶数行に背景色を塗ってくれる。行ループも手動スタイル指定も不要。",false,"md",{"name":1718,"totalTime":1719,"tools":1720,"steps":1722},"gpdf のテーブルにゼブラ縞を入れる","PT5M",[1721,175],"Go 1.22+",[1723,1726,1729],{"name":1724,"text":1725},"縞の色を決める","pdf.RGBHex(0xF5F5F5) で淡いグレー、または pdf.RGB(r, g, b) で 0.0〜1.0 の値を渡す。本文が読める範囲で薄ければ何でもよい。",{"name":1727,"text":1728},"Table 呼び出しに template.TableStripe を渡す","列の中で c.Table(header, rows, template.TableStripe(stripeColor)) と呼ぶ。gpdf がボディ行を順に走査して 1 行おきに色を塗る。",{"name":1730,"text":1731},"TableHeaderStyle と組み合わせてコントラストを付ける","template.TableHeaderStyle(template.TextColor(pdf.White), template.BgColor(brand)) を併用するとヘッダーがボディから視覚的に浮き、縞模様が活きる。",null,{},"/ja/blog/zebra-striped-table-rows",{"title":5,"description":1714},"ja/blog/019.zebra-striped-table-rows",[1738,1739,1740],"recipe","tutorial","templates","J-gfgoiXEAz7g0rHnXbevRFh2gy-J4bGbpVJ29GeHhA",1779199021882]