table固定表头并且固定左边第一列的纯粹css实现

以下是网页版的,小程序版本的因为小程序没有table tr tb th这些标签所以你可以通过view lable模拟出来(也是可以直接做到的 我有时间在放出来)

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>99x99</title>
  
  
      <link rel="stylesheet" href="css/style.css">

  <style>
        *{margin: 0px; padding: 0px;}


table { table-layout:fixed; }
th { position:-webkit-sticky; position:sticky; }
thead tr th { top:0; }
thead tr th:first-of-type { left:0; z-index:1; }
tbody th { left:0; }


tbody tr:nth-of-type(odd) td:nth-of-type(odd),
tbody tr:nth-of-type(even) td:nth-of-type(even){
  background:#eee;
}

th, td {
  text-align:center;
  vertical-align:middle;
}

th {
  padding:10px;
  background:#222;
  color:#eee;
}
  </style>
</head>

<body>

  
<table>
  <thead>
    <tr>
      <th>×</th>
      <th scope="col">1</th>
      <th scope="col">2</th>
      <th scope="col">3</th>
      <th scope="col">4</th>
      <th scope="col">5</th>
      <th scope="col">6</th>
      <th scope="col">7</th>
      <th scope="col">8</th>
      <th scope="col">9</th>
      <th scope="col">10</th>
      <th scope="col">11</th>
      <th scope="col">12</th>
      <th scope="col">13</th>
      <th scope="col">14</th>
      <th scope="col">15</th>
      <th scope="col">16</th>
      <th scope="col">17</th>
      <th scope="col">18</th>
      <th scope="col">19</th>
      <th scope="col">20</th>
      <th scope="col">21</th>
      <th scope="col">22</th>
      <th scope="col">23</th>
      <th scope="col">24</th>
      <th scope="col">25</th>
      <th scope="col">26</th>
      <th scope="col">27</th>
      <th scope="col">28</th>
      <th scope="col">29</th>
      <th scope="col">30</th>
      <th scope="col">31</th>
      <th scope="col">32</th>
      <th scope="col">33</th>
      <th scope="col">34</th>
      <th scope="col">35</th>
      <th scope="col">36</th>
      <th scope="col">37</th>
      <th scope="col">38</th>
      <th scope="col">39</th>
      <th scope="col">40</th>
      <th scope="col">41</th>
      <th scope="col">42</th>
      <th scope="col">43</th>
      <th scope="col">44</th>
      <th scope="col">45</th>
      <th scope="col">46</th>
      <th scope="col">47</th>
      <th scope="col">48</th>
      <th scope="col">49</th>
      <th scope="col">50</th>
      <th scope="col">51</th>
      <th scope="col">52</th>
      <th scope="col">53</th>
      <th scope="col">54</th>
      <th scope="col">55</th>
      <th scope="col">56</th>
      <th scope="col">57</th>
      <th scope="col">58</th>
      <th scope="col">59</th>
      <th scope="col">60</th>
      <th scope="col">61</th>
      <th scope="col">62</th>
      <th scope="col">63</th>
      <th scope="col">64</th>
      <th scope="col">65</th>
      <th scope="col">66</th>
      <th scope="col">67</th>
      <th scope="col">68</th>
      <th scope="col">69</th>
      <th scope="col">70</th>
      <th scope="col">71</th>
      <th scope="col">72</th>
      <th scope="col">73</th>
      <th scope="col">74</th>
      <th scope="col">75</th>
      <th scope="col">76</th>
      <th scope="col">77</th>
      <th scope="col">78</th>
      <th scope="col">79</th>
      <th scope="col">80</th>
      <th scope="col">81</th>
      <th scope="col">82</th>
      <th scope="col">83</th>
      <th scope="col">84</th>
      <th scope="col">85</th>
      <th scope="col">86</th>
      <th scope="col">87</th>
      <th scope="col">88</th>
      <th scope="col">89</th>
      <th scope="col">90</th>
      <th scope="col">91</th>
      <th scope="col">92</th>
      <th scope="col">93</th>
      <th scope="col">94</th>
      <th scope="col">95</th>
      <th scope="col">96</th>
      <th scope="col">97</th>
      <th scope="col">98</th>
      <th scope="col">99</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <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>
      <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>
      <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>
      <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>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>2</td>
      <td>4</td>
      <td>6</td>
      <td>8</td>
      <td>10</td>
      <td>12</td>
      <td>14</td>
      <td>16</td>
      <td>18</td>
      <td>20</td>
      <td>22</td>
      <td>24</td>
      <td>26</td>
      <td>28</td>
      <td>30</td>
      <td>32</td>
      <td>34</td>
      <td>36</td>
      <td>38</td>
      <td>40</td>
      <td>42</td>
      <td>44</td>
      <td>46</td>
      <td>48</td>
      <td>50</td>
      <td>52</td>
      <td>54</td>
      <td>56</td>
      <td>58</td>
      <td>60</td>
      <td>62</td>
      <td>64</td>
      <td>66</td>
      <td>68</td>
      <td>70</td>
      <td>72</td>
      <td>74</td>
      <td>76</td>
      <td>78</td>
      <td>80</td>
      <td>82</td>
      <td>84</td>
      <td>86</td>
      <td>88</td>
      <td>90</td>
      <td>92</td>
      <td>94</td>
      <td>96</td>
      <td>98</td>
      <td>100</td>
      <td>102</td>
      <td>104</td>
      <td>106</td>
      <td>108</td>
      <td>110</td>
      <td>112</td>
      <td>114</td>
      <td>116</td>
      <td>118</td>
      <td>120</td>
      <td>122</td>
      <td>124</td>
      <td>126</td>
      <td>128</td>
      <td>130</td>
      <td>132</td>
      <td>134</td>
      <td>136</td>
      <td>138</td>
      <td>140</td>
      <td>142</td>
      <td>144</td>
      <td>146</td>
      <td>148</td>
      <td>150</td>
      <td>152</td>
      <td>154</td>
      <td>156</td>
      <td>158</td>
      <td>160</td>
      <td>162</td>
      <td>164</td>
      <td>166</td>
      <td>168</td>
      <td>170</td>
      <td>172</td>
      <td>174</td>
      <td>176</td>
      <td>178</td>
      <td>180</td>
      <td>182</td>
      <td>184</td>
      <td>186</td>
      <td>188</td>
      <td>190</td>
      <td>192</td>
      <td>194</td>
      <td>196</td>
      <td>198</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>3</td>
      <td>6</td>
      <td>9</td>
      <td>12</td>
      <td>15</td>
      <td>18</td>
      <td>21</td>
      <td>24</td>
      <td>27</td>
      <td>30</td>
      <td>33</td>
      <td>36</td>
      <td>39</td>
      <td>42</td>
      <td>45</td>
      <td>48</td>
      <td>51</td>
      <td>54</td>
      <td>57</td>
      <td>60</td>
      <td>63</td>
      <td>66</td>
      <td>69</td>
      <td>72</td>
      <td>75</td>
      <td>78</td>
      <td>81</td>
      <td>84</td>
      <td>87</td>
      <td>90</td>
      <td>93</td>
      <td>96</td>
      <td>99</td>
      <td>102</td>
      <td>105</td>
      <td>108</td>
      <td>111</td>
      <td>114</td>
      <td>117</td>
      <td>120</td>
      <td>123</td>
      <td>126</td>
      <td>129</td>
      <td>132</td>
      <td>135</td>
      <td>138</td>
      <td>141</td>
      <td>144</td>
      <td>147</td>
      <td>150</td>
      <td>153</td>
      <td>156</td>
      <td>159</td>
      <td>162</td>
      <td>165</td>
      <td>168</td>
      <td>171</td>
      <td>174</td>
      <td>177</td>
      <td>180</td>
      <td>183</td>
      <td>186</td>
      <td>189</td>
      <td>192</td>
      <td>195</td>
      <td>198</td>
      <td>201</td>
      <td>204</td>
      <td>207</td>
      <td>210</td>
      <td>213</td>
      <td>216</td>
      <td>219</td>
      <td>222</td>
      <td>225</td>
      <td>228</td>
      <td>231</td>
      <td>234</td>
      <td>237</td>
      <td>240</td>
      <td>243</td>
      <td>246</td>
      <td>249</td>
      <td>252</td>
      <td>255</td>
      <td>258</td>
      <td>261</td>
      <td>264</td>
      <td>267</td>
      <td>270</td>
      <td>273</td>
      <td>276</td>
      <td>279</td>
      <td>282</td>
      <td>285</td>
      <td>288</td>
      <td>291</td>
      <td>294</td>
      <td>297</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>4</td>
      <td>8</td>
      <td>12</td>
      <td>16</td>
      <td>20</td>
      <td>24</td>
      <td>28</td>
      <td>32</td>
      <td>36</td>
      <td>40</td>
      <td>44</td>
      <td>48</td>
      <td>52</td>
      <td>56</td>
      <td>60</td>
      <td>64</td>
      <td>68</td>
      <td>72</td>
      <td>76</td>
      <td>80</td>
      <td>84</td>
      <td>88</td>
      <td>92</td>
      <td>96</td>
      <td>100</td>
      <td>104</td>
      <td>108</td>
      <td>112</td>
      <td>116</td>
      <td>120</td>
      <td>124</td>
      <td>128</td>
      <td>132</td>
      <td>136</td>
      <td>140</td>
      <td>144</td>
      <td>148</td>
      <td>152</td>
      <td>156</td>
      <td>160</td>
      <td>164</td>
      <td>168</td>
      <td>172</td>
      <td>176</td>
      <td>180</td>
      <td>184</td>
      <td>188</td>
      <td>192</td>
      <td>196</td>
      <td>200</td>
      <td>204</td>
      <td>208</td>
      <td>212</td>
      <td>216</td>
      <td>220</td>
      <td>224</td>
      <td>228</td>
      <td>232</td>
      <td>236</td>
      <td>240</td>
      <td>244</td>
      <td>248</td>
      <td>252</td>
      <td>256</td>
      <td>260</td>
      <td>264</td>
      <td>268</td>
      <td>272</td>
      <td>276</td>
      <td>280</td>
      <td>284</td>
      <td>288</td>
      <td>292</td>
      <td>296</td>
      <td>300</td>
      <td>304</td>
      <td>308</td>
      <td>312</td>
      <td>316</td>
      <td>320</td>
      <td>324</td>
      <td>328</td>
      <td>332</td>
      <td>336</td>
      <td>340</td>
      <td>344</td>
      <td>348</td>
      <td>352</td>
      <td>356</td>
      <td>360</td>
      <td>364</td>
      <td>368</td>
      <td>372</td>
      <td>376</td>
      <td>380</td>
      <td>384</td>
      <td>388</td>
      <td>392</td>
      <td>396</td>
    </tr>
    <tr>
      <th scope="row">5</th>
      <td>5</td>
      <td>10</td>
      <td>15</td>
      <td>20</td>
      <td>25</td>
      <td>30</td>
      <td>35</td>
      <td>40</td>
      <td>45</td>
      <td>50</td>
      <td>55</td>
      <td>60</td>
      <td>65</td>
      <td>70</td>
      <td>75</td>
      <td>80</td>
      <td>85</td>
      <td>90</td>
      <td>95</td>
      <td>100</td>
      <td>105</td>
      <td>110</td>
      <td>115</td>
      <td>120</td>
      <td>125</td>
      <td>130</td>
      <td>135</td>
      <td>140</td>
      <td>145</td>
      <td>150</td>
      <td>155</td>
      <td>160</td>
      <td>165</td>
      <td>170</td>
      <td>175</td>
      <td>180</td>
      <td>185</td>
      <td>190</td>
      <td>195</td>
      <td>200</td>
      <td>205</td>
      <td>210</td>
      <td>215</td>
      <td>220</td>
      <td>225</td>
      <td>230</td>
      <td>235</td>
      <td>240</td>
      <td>245</td>
      <td>250</td>
      <td>255</td>
      <td>260</td>
      <td>265</td>
      <td>270</td>
      <td>275</td>
      <td>280</td>
      <td>285</td>
      <td>290</td>
      <td>295</td>
      <td>300</td>
      <td>305</td>
      <td>310</td>
      <td>315</td>
      <td>320</td>
      <td>325</td>
      <td>330</td>
      <td>335</td>
      <td>340</td>
      <td>345</td>
      <td>350</td>
      <td>355</td>
      <td>360</td>
      <td>365</td>
      <td>370</td>
      <td>375</td>
      <td>380</td>
      <td>385</td>
      <td>390</td>
      <td>395</td>
      <td>400</td>
      <td>405</td>
      <td>410</td>
      <td>415</td>
      <td>420</td>
      <td>425</td>
      <td>430</td>
      <td>435</td>
      <td>440</td>
      <td>445</td>
      <td>450</td>
      <td>455</td>
      <td>460</td>
      <td>465</td>
      <td>470</td>
      <td>475</td>
      <td>480</td>
      <td>485</td>
      <td>490</td>
      <td>495</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>6</td>
      <td>12</td>
      <td>18</td>
      <td>24</td>
      <td>30</td>
      <td>36</td>
      <td>42</td>
      <td>48</td>
      <td>54</td>
      <td>60</td>
      <td>66</td>
      <td>72</td>
      <td>78</td>
      <td>84</td>
      <td>90</td>
      <td>96</td>
      <td>102</td>
      <td>108</td>
      <td>114</td>
      <td>120</td>
      <td>126</td>
      <td>132</td>
      <td>138</td>
      <td>144</td>
      <td>150</td>
      <td>156</td>
      <td>162</td>
      <td>168</td>
      <td>174</td>
      <td>180</td>
      <td>186</td>
      <td>192</td>
      <td>198</td>
      <td>204</td>
      <td>210</td>
      <td>216</td>
      <td>222</td>
      <td>228</td>
      <td>234</td>
      <td>240</td>
      <td>246</td>
      <td>252</td>
      <td>258</td>
      <td>264</td>
      <td>270</td>
      <td>276</td>
      <td>282</td>
      <td>288</td>
      <td>294</td>
      <td>300</td>
      <td>306</td>
      <td>312</td>
      <td>318</td>
      <td>324</td>
      <td>330</td>
      <td>336</td>
      <td>342</td>
      <td>348</td>
      <td>354</td>
      <td>360</td>
      <td>366</td>
      <td>372</td>
      <td>378</td>
      <td>384</td>
      <td>390</td>
      <td>396</td>
      <td>402</td>
      <td>408</td>
      <td>414</td>
      <td>420</td>
      <td>426</td>
      <td>432</td>
      <td>438</td>
      <td>444</td>
      <td>450</td>
      <td>456</td>
      <td>462</td>
      <td>468</td>
      <td>474</td>
      <td>480</td>
      <td>486</td>
      <td>492</td>
      <td>498</td>
      <td>504</td>
      <td>510</td>
      <td>516</td>
      <td>522</td>
      <td>528</td>
      <td>534</td>
      <td>540</td>
      <td>546</td>
      <td>552</td>
      <td>558</td>
      <td>564</td>
      <td>570</td>
      <td>576</td>
      <td>582</td>
      <td>588</td>
      <td>594</td>
    </tr>
    <tr>
      <th scope="row">7</th>
      <td>7</td>
      <td>14</td>
      <td>21</td>
      <td>28</td>
      <td>35</td>
      <td>42</td>
      <td>49</td>
      <td>56</td>
      <td>63</td>
      <td>70</td>
      <td>77</td>
      <td>84</td>
      <td>91</td>
      <td>98</td>
      <td>105</td>
      <td>112</td>
      <td>119</td>
      <td>126</td>
      <td>133</td>
      <td>140</td>
      <td>147</td>
      <td>154</td>
      <td>161</td>
      <td>168</td>
      <td>175</td>
      <td>182</td>
      <td>189</td>
      <td>196</td>
      <td>203</td>
      <td>210</td>
      <td>217</td>
      <td>224</td>
      <td>231</td>
      <td>238</td>
      <td>245</td>
      <td>252</td>
      <td>259</td>
      <td>266</td>
      <td>273</td>
      <td>280</td>
      <td>287</td>
      <td>294</td>
      <td>301</td>
      <td>308</td>
      <td>315</td>
      <td>322</td>
      <td>329</td>
      <td>336</td>
      <td>343</td>
      <td>350</td>
      <td>357</td>
      <td>364</td>
      <td>371</td>
      <td>378</td>
      <td>385</td>
      <td>392</td>
      <td>399</td>
      <td>406</td>
      <td>413</td>
      <td>420</td>
      <td>427</td>
      <td>434</td>
      <td>441</td>
      <td>448</td>
      <td>455</td>
      <td>462</td>
      <td>469</td>
      <td>476</td>
      <td>483</td>
      <td>490</td>
      <td>497</td>
      <td>504</td>
      <td>511</td>
      <td>518</td>
      <td>525</td>
      <td>532</td>
      <td>539</td>
      <td>546</td>
      <td>553</td>
      <td>560</td>
      <td>567</td>
      <td>574</td>
      <td>581</td>
      <td>588</td>
      <td>595</td>
      <td>602</td>
      <td>609</td>
      <td>616</td>
      <td>623</td>
      <td>630</td>
      <td>637</td>
      <td>644</td>
      <td>651</td>
      <td>658</td>
      <td>665</td>
      <td>672</td>
      <td>679</td>
      <td>686</td>
      <td>693</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>8</td>
      <td>16</td>
      <td>24</td>
      <td>32</td>
      <td>40</td>
      <td>48</td>
      <td>56</td>
      <td>64</td>
      <td>72</td>
      <td>80</td>
      <td>88</td>
      <td>96</td>
      <td>104</td>
      <td>112</td>
      <td>120</td>
      <td>128</td>
      <td>136</td>
      <td>144</td>
      <td>152</td>
      <td>160</td>
      <td>168</td>
      <td>176</td>
      <td>184</td>
      <td>192</td>
      <td>200</td>
      <td>208</td>
      <td>216</td>
      <td>224</td>
      <td>232</td>
      <td>240</td>
      <td>248</td>
      <td>256</td>
      <td>264</td>
      <td>272</td>
      <td>280</td>
      <td>288</td>
      <td>296</td>
      <td>304</td>
      <td>312</td>
      <td>320</td>
      <td>328</td>
      <td>336</td>
      <td>344</td>
      <td>352</td>
      <td>360</td>
      <td>368</td>
      <td>376</td>
      <td>384</td>
      <td>392</td>
      <td>400</td>
      <td>408</td>
      <td>416</td>
      <td>424</td>
      <td>432</td>
      <td>440</td>
      <td>448</td>
      <td>456</td>
      <td>464</td>
      <td>472</td>
      <td>480</td>
      <td>488</td>
      <td>496</td>
      <td>504</td>
      <td>512</td>
      <td>520</td>
      <td>528</td>
      <td>536</td>
      <td>544</td>
      <td>552</td>
      <td>560</td>
      <td>568</td>
      <td>576</td>
      <td>584</td>
      <td>592</td>
      <td>600</td>
      <td>608</td>
      <td>616</td>
      <td>624</td>
      <td>632</td>
      <td>640</td>
      <td>648</td>
      <td>656</td>
      <td>664</td>
      <td>672</td>
      <td>680</td>
      <td>688</td>
      <td>696</td>
      <td>704</td>
      <td>712</td>
      <td>720</td>
      <td>728</td>
      <td>736</td>
      <td>744</td>
      <td>752</td>
      <td>760</td>
      <td>768</td>
      <td>776</td>
      <td>784</td>
      <td>792</td>
    </tr>
    <tr>
      <th scope="row">9</th>
      <td>9</td>
      <td>18</td>
      <td>27</td>
      <td>36</td>
      <td>45</td>
      <td>54</td>
      <td>63</td>
      <td>72</td>
      <td>81</td>
      <td>90</td>
      <td>99</td>
      <td>108</td>
      <td>117</td>
      <td>126</td>
      <td>135</td>
      <td>144</td>
      <td>153</td>
      <td>162</td>
      <td>171</td>
      <td>180</td>
      <td>189</td>
      <td>198</td>
      <td>207</td>
      <td>216</td>
      <td>225</td>
      <td>234</td>
      <td>243</td>
      <td>252</td>
      <td>261</td>
      <td>270</td>
      <td>279</td>
      <td>288</td>
      <td>297</td>
      <td>306</td>
      <td>315</td>
      <td>324</td>
      <td>333</td>
      <td>342</td>
      <td>351</td>
      <td>360</td>
      <td>369</td>
      <td>378</td>
      <td>387</td>
      <td>396</td>
      <td>405</td>
      <td>414</td>
      <td>423</td>
      <td>432</td>
      <td>441</td>
      <td>450</td>
      <td>459</td>
      <td>468</td>
      <td>477</td>
      <td>486</td>
      <td>495</td>
      <td>504</td>
      <td>513</td>
      <td>522</td>
      <td>531</td>
      <td>540</td>
      <td>549</td>
      <td>558</td>
      <td>567</td>
      <td>576</td>
      <td>585</td>
      <td>594</td>
      <td>603</td>
      <td>612</td>
      <td>621</td>
      <td>630</td>
      <td>639</td>
      <td>648</td>
      <td>657</td>
      <td>666</td>
      <td>675</td>
      <td>684</td>
      <td>693</td>
      <td>702</td>
      <td>711</td>
      <td>720</td>
      <td>729</td>
      <td>738</td>
      <td>747</td>
      <td>756</td>
      <td>765</td>
      <td>774</td>
      <td>783</td>
      <td>792</td>
      <td>801</td>
      <td>810</td>
      <td>819</td>
      <td>828</td>
      <td>837</td>
      <td>846</td>
      <td>855</td>
      <td>864</td>
      <td>873</td>
      <td>882</td>
      <td>891</td>
    </tr>
    <tr>
      <th scope="row">10</th>
      <td>10</td>
      <td>20</td>
      <td>30</td>
      <td>40</td>
      <td>50</td>
      <td>60</td>
      <td>70</td>
      <td>80</td>
      <td>90</td>
      <td>100</td>
      <td>110</td>
      <td>120</td>
      <td>130</td>
      <td>140</td>
      <td>150</td>
      <td>160</td>
      <td>170</td>
      <td>180</td>
      <td>190</td>
      <td>200</td>
      <td>210</td>
      <td>220</td>
      <td>230</td>
      <td>240</td>
      <td>250</td>
      <td>260</td>
      <td>270</td>
      <td>280</td>
      <td>290</td>
      <td>300</td>
      <td>310</td>
      <td>320</td>
      <td>330</td>
      <td>340</td>
      <td>350</td>
      <td>360</td>
      <td>370</td>
      <td>380</td>
      <td>390</td>
      <td>400</td>
      <td>410</td>
      <td>420</td>
      <td>430</td>
      <td>440</td>
      <td>450</td>
      <td>460</td>
      <td>470</td>
      <td>480</td>
      <td>490</td>
      <td>500</td>
      <td>510</td>
      <td>520</td>
      <td>530</td>
      <td>540</td>
      <td>550</td>
      <td>560</td>
      <td>570</td>
      <td>580</td>
      <td>590</td>
      <td>600</td>
      <td>610</td>
      <td>620</td>
      <td>630</td>
      <td>640</td>
      <td>650</td>
      <td>660</td>
      <td>670</td>
      <td>680</td>
      <td>690</td>
      <td>700</td>
      <td>710</td>
      <td>720</td>
      <td>730</td>
      <td>740</td>
      <td>750</td>
      <td>760</td>
      <td>770</td>
      <td>780</td>
      <td>790</td>
      <td>800</td>
      <td>810</td>
      <td>820</td>
      <td>830</td>
      <td>840</td>
      <td>850</td>
      <td>860</td>
      <td>870</td>
      <td>880</td>
      <td>890</td>
      <td>900</td>
      <td>910</td>
      <td>920</td>
      <td>930</td>
      <td>940</td>
      <td>950</td>
      <td>960</td>
      <td>970</td>
      <td>980</td>
      <td>990</td>
    </tr>
    <tr>
      <th scope="row">11</th>
      <td>11</td>
      <td>22</td>
      <td>33</td>
      <td>44</td>
      <td>55</td>
      <td>66</td>
      <td>77</td>
      <td>88</td>
      <td>99</td>
      <td>110</td>
      <td>121</td>
      <td>132</td>
      <td>143</td>
      <td>154</td>
      <td>165</td>
      <td>176</td>
      <td>187</td>
      <td>198</td>
      <td>209</td>
      <td>220</td>
      <td>231</td>
      <td>242</td>
      <td>253</td>
      <td>264</td>
      <td>275</td>
      <td>286</td>
      <td>297</td>
      <td>308</td>
      <td>319</td>
      <td>330</td>
      <td>341</td>
      <td>352</td>
      <td>363</td>
      <td>374</td>
      <td>385</td>
      <td>396</td>
      <td>407</td>
      <td>418</td>
      <td>429</td>
      <td>440</td>
      <td>451</td>
      <td>462</td>
      <td>473</td>
      <td>484</td>
      <td>495</td>
      <td>506</td>
      <td>517</td>
      <td>528</td>
      <td>539</td>
      <td>550</td>
      <td>561</td>
      <td>572</td>
      <td>583</td>
      <td>594</td>
      <td>605</td>
      <td>616</td>
      <td>627</td>
      <td>638</td>
      <td>649</td>
      <td>660</td>
      <td>671</td>
      <td>682</td>
      <td>693</td>
      <td>704</td>
      <td>715</td>
      <td>726</td>
      <td>737</td>
      <td>748</td>
      <td>759</td>
      <td>770</td>
      <td>781</td>
      <td>792</td>
      <td>803</td>
      <td>814</td>
      <td>825</td>
      <td>836</td>
      <td>847</td>
      <td>858</td>
      <td>869</td>
      <td>880</td>
      <td>891</td>
      <td>902</td>
      <td>913</td>
      <td>924</td>
      <td>935</td>
      <td>946</td>
      <td>957</td>
      <td>968</td>
      <td>979</td>
      <td>990</td>
      <td>1001</td>
      <td>1012</td>
      <td>1023</td>
      <td>1034</td>
      <td>1045</td>
      <td>1056</td>
      <td>1067</td>
      <td>1078</td>
      <td>1089</td>
    </tr>
    <tr>
      <th scope="row">12</th>
      <td>12</td>
      <td>24</td>
      <td>36</td>
      <td>48</td>
      <td>60</td>
      <td>72</td>
      <td>84</td>
      <td>96</td>
      <td>108</td>
      <td>120</td>
      <td>132</td>
      <td>144</td>
      <td>156</td>
      <td>168</td>
      <td>180</td>
      <td>192</td>
      <td>204</td>
      <td>216</td>
      <td>228</td>
      <td>240</td>
      <td>252</td>
      <td>264</td>
      <td>276</td>
      <td>288</td>
      <td>300</td>
      <td>312</td>
      <td>324</td>
      <td>336</td>
      <td>348</td>
      <td>360</td>
      <td>372</td>
      <td>384</td>
      <td>396</td>
      <td>408</td>
      <td>420</td>
      <td>432</td>
      <td>444</td>
      <td>456</td>
      <td>468</td>
      <td>480</td>
      <td>492</td>
      <td>504</td>
      <td>516</td>
      <td>528</td>
      <td>540</td>
      <td>552</td>
      <td>564</td>
      <td>576</td>
      <td>588</td>
      <td>600</td>
      <td>612</td>
      <td>624</td>
      <td>636</td>
      <td>648</td>
      <td>660</td>
      <td>672</td>
      <td>684</td>
      <td>696</td>
      <td>708</td>
      <td>720</td>
      <td>732</td>
      <td>744</td>
      <td>756</td>
      <td>768</td>
      <td>780</td>
      <td>792</td>
      <td>804</td>
      <td>816</td>
      <td>828</td>
      <td>840</td>
      <td>852</td>
      <td>864</td>
      <td>876</td>
      <td>888</td>
      <td>900</td>
      <td>912</td>
      <td>924</td>
      <td>936</td>
      <td>948</td>
      <td>960</td>
      <td>972</td>
      <td>984</td>
      <td>996</td>
      <td>1008</td>
      <td>1020</td>
      <td>1032</td>
      <td>1044</td>
      <td>1056</td>
      <td>1068</td>
      <td>1080</td>
      <td>1092</td>
      <td>1104</td>
      <td>1116</td>
      <td>1128</td>
      <td>1140</td>
      <td>1152</td>
      <td>1164</td>
      <td>1176</td>
      <td>1188</td>
    </tr>
    <tr>
      <th scope="row">13</th>
      <td>13</td>
      <td>26</td>
      <td>39</td>
      <td>52</td>
      <td>65</td>
      <td>78</td>
      <td>91</td>
      <td>104</td>
      <td>117</td>
      <td>130</td>
      <td>143</td>
      <td>156</td>
      <td>169</td>
      <td>182</td>
      <td>195</td>
      <td>208</td>
      <td>221</td>
      <td>234</td>
      <td>247</td>
      <td>260</td>
      <td>273</td>
      <td>286</td>
      <td>299</td>
      <td>312</td>
      <td>325</td>
      <td>338</td>
      <td>351</td>
      <td>364</td>
      <td>377</td>
      <td>390</td>
      <td>403</td>
      <td>416</td>
      <td>429</td>
      <td>442</td>
      <td>455</td>
      <td>468</td>
      <td>481</td>
      <td>494</td>
      <td>507</td>
      <td>520</td>
      <td>533</td>
      <td>546</td>
      <td>559</td>
      <td>572</td>
      <td>585</td>
      <td>598</td>
      <td>611</td>
      <td>624</td>
      <td>637</td>
      <td>650</td>
      <td>663</td>
      <td>676</td>
      <td>689</td>
      <td>702</td>
      <td>715</td>
      <td>728</td>
      <td>741</td>
      <td>754</td>
      <td>767</td>
      <td>780</td>
      <td>793</td>
      <td>806</td>
      <td>819</td>
      <td>832</td>
      <td>845</td>
      <td>858</td>
      <td>871</td>
      <td>884</td>
      <td>897</td>
      <td>910</td>
      <td>923</td>
      <td>936</td>
      <td>949</td>
      <td>962</td>
      <td>975</td>
      <td>988</td>
      <td>1001</td>
      <td>1014</td>
      <td>1027</td>
      <td>1040</td>
      <td>1053</td>
      <td>1066</td>
      <td>1079</td>
      <td>1092</td>
      <td>1105</td>
      <td>1118</td>
      <td>1131</td>
      <td>1144</td>
      <td>1157</td>
      <td>1170</td>
      <td>1183</td>
      <td>1196</td>
      <td>1209</td>
      <td>1222</td>
      <td>1235</td>
      <td>1248</td>
      <td>1261</td>
      <td>1274</td>
      <td>1287</td>
    </tr>
    <tr>
      <th scope="row">14</th>
      <td>14</td>
      <td>28</td>
      <td>42</td>
      <td>56</td>
      <td>70</td>
      <td>84</td>
      <td>98</td>
      <td>112</td>
      <td>126</td>
      <td>140</td>
      <td>154</td>
      <td>168</td>
      <td>182</td>
      <td>196</td>
      <td>210</td>
      <td>224</td>
      <td>238</td>
      <td>252</td>
      <td>266</td>
      <td>280</td>
      <td>294</td>
      <td>308</td>
      <td>322</td>
      <td>336</td>
      <td>350</td>
      <td>364</td>
      <td>378</td>
      <td>392</td>
      <td>406</td>
      <td>420</td>
      <td>434</td>
      <td>448</td>
      <td>462</td>
      <td>476</td>
      <td>490</td>
      <td>504</td>
      <td>518</td>
      <td>532</td>
      <td>546</td>
      <td>560</td>
      <td>574</td>
      <td>588</td>
      <td>602</td>
      <td>616</td>
      <td>630</td>
      <td>644</td>
      <td>658</td>
      <td>672</td>
      <td>686</td>
      <td>700</td>
      <td>714</td>
      <td>728</td>
      <td>742</td>
      <td>756</td>
      <td>770</td>
      <td>784</td>
      <td>798</td>
      <td>812</td>
      <td>826</td>
      <td>840</td>
      <td>854</td>
      <td>868</td>
      <td>882</td>
      <td>896</td>
      <td>910</td>
      <td>924</td>
      <td>938</td>
      <td>952</td>
      <td>966</td>
      <td>980</td>
      <td>994</td>
      <td>1008</td>
      <td>1022</td>
      <td>1036</td>
      <td>1050</td>
      <td>1064</td>
      <td>1078</td>
      <td>1092</td>
      <td>1106</td>
      <td>1120</td>
      <td>1134</td>
      <td>1148</td>
      <td>1162</td>
      <td>1176</td>
      <td>1190</td>
      <td>1204</td>
      <td>1218</td>
      <td>1232</td>
      <td>1246</td>
      <td>1260</td>
      <td>1274</td>
      <td>1288</td>
      <td>1302</td>
      <td>1316</td>
      <td>1330</td>
      <td>1344</td>
      <td>1358</td>
      <td>1372</td>
      <td>1386</td>
    </tr>
    <tr>
      <th scope="row">15</th>
      <td>15</td>
      <td>30</td>
      <td>45</td>
      <td>60</td>
      <td>75</td>
      <td>90</td>
      <td>105</td>
      <td>120</td>
      <td>135</td>
      <td>150</td>
      <td>165</td>
      <td>180</td>
      <td>195</td>
      <td>210</td>
      <td>225</td>
      <td>240</td>
      <td>255</td>
      <td>270</td>
      <td>285</td>
      <td>300</td>
      <td>315</td>
      <td>330</td>
      <td>345</td>
      <td>360</td>
      <td>375</td>
      <td>390</td>
      <td>405</td>
      <td>420</td>
      <td>435</td>
      <td>450</td>
      <td>465</td>
      <td>480</td>
      <td>495</td>
      <td>510</td>
      <td>525</td>
      <td>540</td>
      <td>555</td>
      <td>570</td>
      <td>585</td>
      <td>600</td>
      <td>615</td>
      <td>630</td>
      <td>645</td>
      <td>660</td>
      <td>675</td>
      <td>690</td>
      <td>705</td>
      <td>720</td>
      <td>735</td>
      <td>750</td>
      <td>765</td>
      <td>780</td>
      <td>795</td>
      <td>810</td>
      <td>825</td>
      <td>840</td>
      <td>855</td>
      <td>870</td>
      <td>885</td>
      <td>900</td>
      <td>915</td>
      <td>930</td>
      <td>945</td>
      <td>960</td>
      <td>975</td>
      <td>990</td>
      <td>1005</td>
      <td>1020</td>
      <td>1035</td>
      <td>1050</td>
      <td>1065</td>
      <td>1080</td>
      <td>1095</td>
      <td>1110</td>
      <td>1125</td>
      <td>1140</td>
      <td>1155</td>
      <td>1170</td>
      <td>1185</td>
      <td>1200</td>
      <td>1215</td>
      <td>1230</td>
      <td>1245</td>
      <td>1260</td>
      <td>1275</td>
      <td>1290</td>
      <td>1305</td>
      <td>1320</td>
      <td>1335</td>
      <td>1350</td>
      <td>1365</td>
      <td>1380</td>
      <td>1395</td>
      <td>1410</td>
      <td>1425</td>
      <td>1440</td>
      <td>1455</td>
      <td>1470</td>
      <td>1485</td>
    </tr>
 </tbody>
</table>
  
  

</body>

</html>

 

 

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
可以通过使用CSS的position属性和JavaScript来实现layui table表头第一列固定,其他列可以滚动的效果。具体实现步骤如下: 1. 首先,在layui table中,需要在HTML中添加一个div元素,用来包裹表格。例如: ```html <div class="table-wrapper"> <table class="layui-table"> <!-- 表格内容 --> </table> </div> ``` 2. 在CSS中,需要对表格进行样式设置,包括表格的宽度、高度和边框等样式,同时需要设置表头第一列的position属性为fixed,以实现固定效果。例如: ```css .table-wrapper { width: 100%; height: 500px; overflow: auto; position: relative; } .layui-table thead tr { position: fixed; top: 0; z-index: 1; } .layui-table tbody td:first-child { position: sticky; left: 0; } ``` 3. 在JavaScript中,需要实现滚动事件,当表格内容滚动时,将表头第一列的位置进行调整,以保持固定效果。例如: ```javascript var wrapper = document.querySelector('.table-wrapper'); var table = document.querySelector('.layui-table'); var thead = table.querySelector('thead tr'); var tbody = table.querySelector('tbody'); var firstColumn = tbody.querySelector('td:first-child'); wrapper.addEventListener('scroll', function() { thead.style.transform = 'translateY(' + this.scrollTop + 'px)'; firstColumn.style.transform = 'translateX(' + this.scrollLeft + 'px)'; }); ``` 通过以上步骤,即可实现layui table表头第一列固定,其他列可以滚动的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值