야매로 시작하는 웹 개발
[CSS] 테이블 스크롤 시 헤더 고정하기
Napna
2024. 7. 5. 17:06
이번에는 웹페이지에 표를 그려보려고 한다.
근데 테이블의 데이터가 너무 많으면
정해뒀던 테이블의 영역 밖까지 데이터가 넘치기 때문에
적절히 잘라서 일부만 표시하고, 넘겨가면서 볼 수 있도록 해야 한다.
가령 자바스크립트를 활용해 페이지를 나눈다든가 하는 방법으로 말이다.
필자는 스크롤 방식을 더 선호하기 때문에 overflow: auto;를 사용해서
테이블을 스크롤하며 볼 수 있도록 만드려고 한다.
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<div class="container">
<table class="my-table">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
<th>Header6</th>
<th>Header7</th>
<th>Header8</th>
<th>Header9</th>
<th>Header10</th>
<th>Header11</th>
<th>Header12</th>
<th>Header13</th>
<th>Header14</th>
<th>Header15</th>
<th>Header16</th>
<th>Header17</th>
<th>Header18</th>
<th>Header19</th>
<th>Header20</th>
<th>Header21</th>
<th>Header22</th>
<th>Header23</th>
<th>Header24</th>
<th>Header25</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
<td>49</td>
<td>50</td>
</tr>
<tr>
<td>51</td>
<td>52</td>
<td>53</td>
<td>54</td>
<td>55</td>
<td>56</td>
<td>57</td>
<td>58</td>
<td>59</td>
<td>60</td>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
<td>65</td>
<td>66</td>
<td>67</td>
<td>68</td>
<td>69</td>
<td>70</td>
<td>71</td>
<td>72</td>
<td>73</td>
<td>74</td>
<td>75</td>
</tr>
<tr>
<td>76</td>
<td>77</td>
<td>78</td>
<td>79</td>
<td>80</td>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
<td>85</td>
<td>86</td>
<td>87</td>
<td>88</td>
<td>89</td>
<td>90</td>
<td>91</td>
<td>92</td>
<td>93</td>
<td>94</td>
<td>95</td>
<td>96</td>
<td>97</td>
<td>98</td>
<td>99</td>
<td>100</td>
</tr>
<tr>
<td>101</td>
<td>102</td>
<td>103</td>
<td>104</td>
<td>105</td>
<td>106</td>
<td>107</td>
<td>108</td>
<td>109</td>
<td>110</td>
<td>111</td>
<td>112</td>
<td>113</td>
<td>114</td>
<td>115</td>
<td>116</td>
<td>117</td>
<td>118</td>
<td>119</td>
<td>120</td>
<td>121</td>
<td>122</td>
<td>123</td>
<td>124</td>
<td>125</td>
</tr>
<tr>
<td>126</td>
<td>127</td>
<td>128</td>
<td>129</td>
<td>130</td>
<td>131</td>
<td>132</td>
<td>133</td>
<td>134</td>
<td>135</td>
<td>136</td>
<td>137</td>
<td>138</td>
<td>139</td>
<td>140</td>
<td>141</td>
<td>142</td>
<td>143</td>
<td>144</td>
<td>145</td>
<td>146</td>
<td>147</td>
<td>148</td>
<td>149</td>
<td>150</td>
</tr>
<tr>
<td>151</td>
<td>152</td>
<td>153</td>
<td>154</td>
<td>155</td>
<td>156</td>
<td>157</td>
<td>158</td>
<td>159</td>
<td>160</td>
<td>161</td>
<td>162</td>
<td>163</td>
<td>164</td>
<td>165</td>
<td>166</td>
<td>167</td>
<td>168</td>
<td>169</td>
<td>170</td>
<td>171</td>
<td>172</td>
<td>173</td>
<td>174</td>
<td>175</td>
</tr>
<tr>
<td>176</td>
<td>177</td>
<td>178</td>
<td>179</td>
<td>180</td>
<td>181</td>
<td>182</td>
<td>183</td>
<td>184</td>
<td>185</td>
<td>186</td>
<td>187</td>
<td>188</td>
<td>189</td>
<td>190</td>
<td>191</td>
<td>192</td>
<td>193</td>
<td>194</td>
<td>195</td>
<td>196</td>
<td>197</td>
<td>198</td>
<td>199</td>
<td>200</td>
</tr>
<tr>
<td>201</td>
<td>202</td>
<td>203</td>
<td>204</td>
<td>205</td>
<td>206</td>
<td>207</td>
<td>208</td>
<td>209</td>
<td>210</td>
<td>211</td>
<td>212</td>
<td>213</td>
<td>214</td>
<td>215</td>
<td>216</td>
<td>217</td>
<td>218</td>
<td>219</td>
<td>220</td>
<td>221</td>
<td>222</td>
<td>223</td>
<td>224</td>
<td>225</td>
</tr>
<tr>
<td>226</td>
<td>227</td>
<td>228</td>
<td>229</td>
<td>230</td>
<td>231</td>
<td>232</td>
<td>233</td>
<td>234</td>
<td>235</td>
<td>236</td>
<td>237</td>
<td>238</td>
<td>239</td>
<td>240</td>
<td>241</td>
<td>242</td>
<td>243</td>
<td>244</td>
<td>245</td>
<td>246</td>
<td>247</td>
<td>248</td>
<td>249</td>
<td>250</td>
</tr>
<tr>
<td>251</td>
<td>252</td>
<td>253</td>
<td>254</td>
<td>255</td>
<td>256</td>
<td>257</td>
<td>258</td>
<td>259</td>
<td>260</td>
<td>261</td>
<td>262</td>
<td>263</td>
<td>264</td>
<td>265</td>
<td>266</td>
<td>267</td>
<td>268</td>
<td>269</td>
<td>270</td>
<td>271</td>
<td>272</td>
<td>273</td>
<td>274</td>
<td>275</td>
</tr>
<tr>
<td>276</td>
<td>277</td>
<td>278</td>
<td>279</td>
<td>280</td>
<td>281</td>
<td>282</td>
<td>283</td>
<td>284</td>
<td>285</td>
<td>286</td>
<td>287</td>
<td>288</td>
<td>289</td>
<td>290</td>
<td>291</td>
<td>292</td>
<td>293</td>
<td>294</td>
<td>295</td>
<td>296</td>
<td>297</td>
<td>298</td>
<td>299</td>
<td>300</td>
</tr>
<tr>
<td>301</td>
<td>302</td>
<td>303</td>
<td>304</td>
<td>305</td>
<td>306</td>
<td>307</td>
<td>308</td>
<td>309</td>
<td>310</td>
<td>311</td>
<td>312</td>
<td>313</td>
<td>314</td>
<td>315</td>
<td>316</td>
<td>317</td>
<td>318</td>
<td>319</td>
<td>320</td>
<td>321</td>
<td>322</td>
<td>323</td>
<td>324</td>
<td>325</td>
</tr>
<tr>
<td>326</td>
<td>327</td>
<td>328</td>
<td>329</td>
<td>330</td>
<td>331</td>
<td>332</td>
<td>333</td>
<td>334</td>
<td>335</td>
<td>336</td>
<td>337</td>
<td>338</td>
<td>339</td>
<td>340</td>
<td>341</td>
<td>342</td>
<td>343</td>
<td>344</td>
<td>345</td>
<td>346</td>
<td>347</td>
<td>348</td>
<td>349</td>
<td>350</td>
</tr>
<tr>
<td>351</td>
<td>352</td>
<td>353</td>
<td>354</td>
<td>355</td>
<td>356</td>
<td>357</td>
<td>358</td>
<td>359</td>
<td>360</td>
<td>361</td>
<td>362</td>
<td>363</td>
<td>364</td>
<td>365</td>
<td>366</td>
<td>367</td>
<td>368</td>
<td>369</td>
<td>370</td>
<td>371</td>
<td>372</td>
<td>373</td>
<td>374</td>
<td>375</td>
</tr>
<tr>
<td>376</td>
<td>377</td>
<td>378</td>
<td>379</td>
<td>380</td>
<td>381</td>
<td>382</td>
<td>383</td>
<td>384</td>
<td>385</td>
<td>386</td>
<td>387</td>
<td>388</td>
<td>389</td>
<td>390</td>
<td>391</td>
<td>392</td>
<td>393</td>
<td>394</td>
<td>395</td>
<td>396</td>
<td>397</td>
<td>398</td>
<td>399</td>
<td>400</td>
</tr>
<tr>
<td>401</td>
<td>402</td>
<td>403</td>
<td>404</td>
<td>405</td>
<td>406</td>
<td>407</td>
<td>408</td>
<td>409</td>
<td>410</td>
<td>411</td>
<td>412</td>
<td>413</td>
<td>414</td>
<td>415</td>
<td>416</td>
<td>417</td>
<td>418</td>
<td>419</td>
<td>420</td>
<td>421</td>
<td>422</td>
<td>423</td>
<td>424</td>
<td>425</td>
</tr>
<tr>
<td>426</td>
<td>427</td>
<td>428</td>
<td>429</td>
<td>430</td>
<td>431</td>
<td>432</td>
<td>433</td>
<td>434</td>
<td>435</td>
<td>436</td>
<td>437</td>
<td>438</td>
<td>439</td>
<td>440</td>
<td>441</td>
<td>442</td>
<td>443</td>
<td>444</td>
<td>445</td>
<td>446</td>
<td>447</td>
<td>448</td>
<td>449</td>
<td>450</td>
</tr>
<tr>
<td>451</td>
<td>452</td>
<td>453</td>
<td>454</td>
<td>455</td>
<td>456</td>
<td>457</td>
<td>458</td>
<td>459</td>
<td>460</td>
<td>461</td>
<td>462</td>
<td>463</td>
<td>464</td>
<td>465</td>
<td>466</td>
<td>467</td>
<td>468</td>
<td>469</td>
<td>470</td>
<td>471</td>
<td>472</td>
<td>473</td>
<td>474</td>
<td>475</td>
</tr>
<tr>
<td>476</td>
<td>477</td>
<td>478</td>
<td>479</td>
<td>480</td>
<td>481</td>
<td>482</td>
<td>483</td>
<td>484</td>
<td>485</td>
<td>486</td>
<td>487</td>
<td>488</td>
<td>489</td>
<td>490</td>
<td>491</td>
<td>492</td>
<td>493</td>
<td>494</td>
<td>495</td>
<td>496</td>
<td>497</td>
<td>498</td>
<td>499</td>
<td>500</td>
</tr>
<tr>
<td>501</td>
<td>502</td>
<td>503</td>
<td>504</td>
<td>505</td>
<td>506</td>
<td>507</td>
<td>508</td>
<td>509</td>
<td>510</td>
<td>511</td>
<td>512</td>
<td>513</td>
<td>514</td>
<td>515</td>
<td>516</td>
<td>517</td>
<td>518</td>
<td>519</td>
<td>520</td>
<td>521</td>
<td>522</td>
<td>523</td>
<td>524</td>
<td>525</td>
</tr>
<tr>
<td>526</td>
<td>527</td>
<td>528</td>
<td>529</td>
<td>530</td>
<td>531</td>
<td>532</td>
<td>533</td>
<td>534</td>
<td>535</td>
<td>536</td>
<td>537</td>
<td>538</td>
<td>539</td>
<td>540</td>
<td>541</td>
<td>542</td>
<td>543</td>
<td>544</td>
<td>545</td>
<td>546</td>
<td>547</td>
<td>548</td>
<td>549</td>
<td>550</td>
</tr>
<tr>
<td>551</td>
<td>552</td>
<td>553</td>
<td>554</td>
<td>555</td>
<td>556</td>
<td>557</td>
<td>558</td>
<td>559</td>
<td>560</td>
<td>561</td>
<td>562</td>
<td>563</td>
<td>564</td>
<td>565</td>
<td>566</td>
<td>567</td>
<td>568</td>
<td>569</td>
<td>570</td>
<td>571</td>
<td>572</td>
<td>573</td>
<td>574</td>
<td>575</td>
</tr>
<tr>
<td>576</td>
<td>577</td>
<td>578</td>
<td>579</td>
<td>580</td>
<td>581</td>
<td>582</td>
<td>583</td>
<td>584</td>
<td>585</td>
<td>586</td>
<td>587</td>
<td>588</td>
<td>589</td>
<td>590</td>
<td>591</td>
<td>592</td>
<td>593</td>
<td>594</td>
<td>595</td>
<td>596</td>
<td>597</td>
<td>598</td>
<td>599</td>
<td>600</td>
</tr>
<tr>
<td>601</td>
<td>602</td>
<td>603</td>
<td>604</td>
<td>605</td>
<td>606</td>
<td>607</td>
<td>608</td>
<td>609</td>
<td>610</td>
<td>611</td>
<td>612</td>
<td>613</td>
<td>614</td>
<td>615</td>
<td>616</td>
<td>617</td>
<td>618</td>
<td>619</td>
<td>620</td>
<td>621</td>
<td>622</td>
<td>623</td>
<td>624</td>
<td>625</td>
</tr>
<tr>
<td>626</td>
<td>627</td>
<td>628</td>
<td>629</td>
<td>630</td>
<td>631</td>
<td>632</td>
<td>633</td>
<td>634</td>
<td>635</td>
<td>636</td>
<td>637</td>
<td>638</td>
<td>639</td>
<td>640</td>
<td>641</td>
<td>642</td>
<td>643</td>
<td>644</td>
<td>645</td>
<td>646</td>
<td>647</td>
<td>648</td>
<td>649</td>
<td>650</td>
</tr>
<tr>
<td>651</td>
<td>652</td>
<td>653</td>
<td>654</td>
<td>655</td>
<td>656</td>
<td>657</td>
<td>658</td>
<td>659</td>
<td>660</td>
<td>661</td>
<td>662</td>
<td>663</td>
<td>664</td>
<td>665</td>
<td>666</td>
<td>667</td>
<td>668</td>
<td>669</td>
<td>670</td>
<td>671</td>
<td>672</td>
<td>673</td>
<td>674</td>
<td>675</td>
</tr>
<tr>
<td>676</td>
<td>677</td>
<td>678</td>
<td>679</td>
<td>680</td>
<td>681</td>
<td>682</td>
<td>683</td>
<td>684</td>
<td>685</td>
<td>686</td>
<td>687</td>
<td>688</td>
<td>689</td>
<td>690</td>
<td>691</td>
<td>692</td>
<td>693</td>
<td>694</td>
<td>695</td>
<td>696</td>
<td>697</td>
<td>698</td>
<td>699</td>
<td>700</td>
</tr>
<tr>
<td>701</td>
<td>702</td>
<td>703</td>
<td>704</td>
<td>705</td>
<td>706</td>
<td>707</td>
<td>708</td>
<td>709</td>
<td>710</td>
<td>711</td>
<td>712</td>
<td>713</td>
<td>714</td>
<td>715</td>
<td>716</td>
<td>717</td>
<td>718</td>
<td>719</td>
<td>720</td>
<td>721</td>
<td>722</td>
<td>723</td>
<td>724</td>
<td>725</td>
</tr>
<tr>
<td>726</td>
<td>727</td>
<td>728</td>
<td>729</td>
<td>730</td>
<td>731</td>
<td>732</td>
<td>733</td>
<td>734</td>
<td>735</td>
<td>736</td>
<td>737</td>
<td>738</td>
<td>739</td>
<td>740</td>
<td>741</td>
<td>742</td>
<td>743</td>
<td>744</td>
<td>745</td>
<td>746</td>
<td>747</td>
<td>748</td>
<td>749</td>
<td>750</td>
</tr>
<tr>
<td>751</td>
<td>752</td>
<td>753</td>
<td>754</td>
<td>755</td>
<td>756</td>
<td>757</td>
<td>758</td>
<td>759</td>
<td>760</td>
<td>761</td>
<td>762</td>
<td>763</td>
<td>764</td>
<td>765</td>
<td>766</td>
<td>767</td>
<td>768</td>
<td>769</td>
<td>770</td>
<td>771</td>
<td>772</td>
<td>773</td>
<td>774</td>
<td>775</td>
</tr>
<tr>
<td>776</td>
<td>777</td>
<td>778</td>
<td>779</td>
<td>780</td>
<td>781</td>
<td>782</td>
<td>783</td>
<td>784</td>
<td>785</td>
<td>786</td>
<td>787</td>
<td>788</td>
<td>789</td>
<td>790</td>
<td>791</td>
<td>792</td>
<td>793</td>
<td>794</td>
<td>795</td>
<td>796</td>
<td>797</td>
<td>798</td>
<td>799</td>
<td>800</td>
</tr>
<tr>
<td>801</td>
<td>802</td>
<td>803</td>
<td>804</td>
<td>805</td>
<td>806</td>
<td>807</td>
<td>808</td>
<td>809</td>
<td>810</td>
<td>811</td>
<td>812</td>
<td>813</td>
<td>814</td>
<td>815</td>
<td>816</td>
<td>817</td>
<td>818</td>
<td>819</td>
<td>820</td>
<td>821</td>
<td>822</td>
<td>823</td>
<td>824</td>
<td>825</td>
</tr>
<tr>
<td>826</td>
<td>827</td>
<td>828</td>
<td>829</td>
<td>830</td>
<td>831</td>
<td>832</td>
<td>833</td>
<td>834</td>
<td>835</td>
<td>836</td>
<td>837</td>
<td>838</td>
<td>839</td>
<td>840</td>
<td>841</td>
<td>842</td>
<td>843</td>
<td>844</td>
<td>845</td>
<td>846</td>
<td>847</td>
<td>848</td>
<td>849</td>
<td>850</td>
</tr>
<tr>
<td>851</td>
<td>852</td>
<td>853</td>
<td>854</td>
<td>855</td>
<td>856</td>
<td>857</td>
<td>858</td>
<td>859</td>
<td>860</td>
<td>861</td>
<td>862</td>
<td>863</td>
<td>864</td>
<td>865</td>
<td>866</td>
<td>867</td>
<td>868</td>
<td>869</td>
<td>870</td>
<td>871</td>
<td>872</td>
<td>873</td>
<td>874</td>
<td>875</td>
</tr>
<tr>
<td>876</td>
<td>877</td>
<td>878</td>
<td>879</td>
<td>880</td>
<td>881</td>
<td>882</td>
<td>883</td>
<td>884</td>
<td>885</td>
<td>886</td>
<td>887</td>
<td>888</td>
<td>889</td>
<td>890</td>
<td>891</td>
<td>892</td>
<td>893</td>
<td>894</td>
<td>895</td>
<td>896</td>
<td>897</td>
<td>898</td>
<td>899</td>
<td>900</td>
</tr>
<tr>
<td>901</td>
<td>902</td>
<td>903</td>
<td>904</td>
<td>905</td>
<td>906</td>
<td>907</td>
<td>908</td>
<td>909</td>
<td>910</td>
<td>911</td>
<td>912</td>
<td>913</td>
<td>914</td>
<td>915</td>
<td>916</td>
<td>917</td>
<td>918</td>
<td>919</td>
<td>920</td>
<td>921</td>
<td>922</td>
<td>923</td>
<td>924</td>
<td>925</td>
</tr>
<tr>
<td>926</td>
<td>927</td>
<td>928</td>
<td>929</td>
<td>930</td>
<td>931</td>
<td>932</td>
<td>933</td>
<td>934</td>
<td>935</td>
<td>936</td>
<td>937</td>
<td>938</td>
<td>939</td>
<td>940</td>
<td>941</td>
<td>942</td>
<td>943</td>
<td>944</td>
<td>945</td>
<td>946</td>
<td>947</td>
<td>948</td>
<td>949</td>
<td>950</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
body {
margin: 0;
background-color: #f0f4f8;
box-sizing: border-box;
}
div.container {
margin: 50px auto;
width: 70%;
height: 700px;
overflow: auto;
}
thead th {
background-color: white;
}
tbody tr:nth-child(odd) td {
background-color: #F5F5F5;
}
tbody tr:nth-child(even) td {
background-color: white;
}
overflow: auto;를 사용하니 스크롤은 잘 되는 것을 볼 수 있다.
하지만 스크롤을 이리저리 하다 보면 테이블 헤더가 저 위로 날아가버려서
지금 보는 데이터 셀이 어느 칼럼의 값인지 헷갈리기 쉬워 보인다.
이건 좀 불편해 보이니 스크롤해도 테이블 헤더가 상단에 고정되게끔 해보자.
thead {
position: sticky;
top: 0px;
}position을 sticky로 설정하면 처음에는 static하게 위치하지만,
부모 요소로부터 지정된 위치에 도달하면 그 위치에 fixed된다.
즉, 이렇게 지정하면 thead가 부모 요소인 table의 최상단(top: 0px)에 고정되는 것이다.
상하 스크롤을 해보면 테이블 헤더가 제대로 고정된 것을 볼 수 있다.
마찬가지로 첫번째 열도 고정시킬 수 있다.
:first-child 셀렉터를 이용해보자.
thead {
position: sticky;
top: 0px;
z-index: 2;
}
tbody tr td:first-child {
position: sticky;
left: 0px;
}
thead tr th:first-child {
position: sticky;
left: 0px;
}
이번엔 왼쪽에 고정시켜야 하기 때문에 left를 0으로 설정했다.
그리고 Header1도 같이 고정시키면 좋을 것 같아서 똑같이 설정해주었다.
또한 첫번째 열이 Header1 밑으로 스크롤되게끔 헤더의 z-index를 높여주었다.
근데 이 상태로 그냥 써보면 뭔가 이상한 것을 볼 수 있다.
둠칫둠칫 한다고 해야하나..?
스크롤하면 고정된 부분이 아주 미세하게 살짝 움직인다.
구분하기 쉽게 border 속성을 한번 넣고 스크롤해보자.
table, table th, table td {
border: solid 1px black;
}
보이는가?
좌우 스크롤을 하기 전엔 왼쪽에 약간의 여백이 존재한다.
앞서 설명했듯 sticky 포지션은
처음에는 static하게 위치하다가 지정된 위치(얘는 left: 0px)에 도달하면 멈추도록 되어 있다.
때문에 스크롤을 하면 왼쪽의 여백 만큼은 움직이게 되는 것이다.
따라서 그냥 저 여백을 없애주거나 멈추는 위치를 여백 만큼 당겨주면 된다.
/* table, table th, table td {
border: solid 1px black;
} */
.my-table {
border-spacing: 0px;
}
보기 안 이쁘니까 여백을 없애주기로 했다.
테두리를 제거하고 다시 스크롤해보면 둠칫둠칫하는 현상은 사라진 걸 볼 수 있다.
bootstrap에서 제공하는 css를 사용한다면
자동으로 border-spacing을 0으로 빼줘서 굳이 수동으로 지정 안해도 된다.
그나저나 역시 테두리를 빼니까 뭔가 밋밋하다.
table th, table td {
border: solid 1px black;
}
테두리를 넣으면 뭔가 또 어색한 것을 볼 수 있는데..
셀 별로 테두리가 생기다보니 셀과 셀이 인접하는 부분은 테두리 2개가 겹쳐서 꽤 두꺼워진다.
.my-table {
border-collapse: collapse;
border-spacing: 0px;
}이게 맘에 안 들어서 테이블에 border-collapse를 지정하면 더 웃긴 현상이 발생한다.
??? 저기요?
테두리가 셀에 붙어있질 않고 스크롤하니까 같이 따라서 가버린다..
만약 bootstrap css를 사용하고 있다면 border collapse가 자동으로 지정되어 있으니
border-collapse: separate;로 다시 풀어주자.
그래서 다른 방식으로 테두리를 넣어보았다.
간단하게 테두리가 2개 겹쳐서 문제니
테두리가 안 겹치게 생성하면 되는 것이다!
table th, table td {
border-right: solid 1px black;
border-bottom: solid 1px black;
}우측과 하단 테두리만 그려줬다.
tbody tr td:first-child {
border-left: solid 1px black;
position: sticky;
left: 0px;
}
thead tr th:first-child {
border-left: solid 1px black;
position: sticky;
left: 0px;
}
thead tr:first-child th {
border-top: solid 1px black;
}
왼쪽 테두리는 아까 고정시켰던 첫번째 열에만 그려주면 될 것이고,
상단 테두리는 헤더의 첫번째 행만 그려주면 될 것이다.
만족스럽게 잘 나온 것 같다.
더보기
body {
margin: 0;
background-color: #f0f4f8;
box-sizing: border-box;
}
div.table-container {
margin: 50px auto;
width: 70%;
height: 700px;
overflow: auto;
}
thead th {
background-color: white;
}
tbody tr:nth-child(odd) td {
background-color: #F5F5F5;
}
tbody tr:nth-child(even) td {
background-color: white;
}
thead {
position: sticky;
top: 0px;
z-index: 2;
}
tbody tr td:first-child {
border-left: solid 1px black;
position: sticky;
left: 0px;
}
thead tr th:first-child {
border-left: solid 1px black;
position: sticky;
left: 0px;
}
thead tr:first-child th {
border-top: solid 1px black;
}
table th, table td {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
.my-table {
border-collapse: separate;
border-spacing: 0px;
}