文章内容中表格宽度超过内容区自动在外层添加div和样式并在电脑端可滑动浏览

展示了一张大型HTML表格,列出了大量员工的排名、姓名、测评得分和考核结果,所有员工的考核结果均为合格。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

HTML部分:

<div class="newscon" id="conbox">
<table>
<tbody>
    <tr>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    </tr>
    <tr>
    <td>133</td>
    <td>官志勇</td>
    <td>88</td>
    <td>合格</td>
    <td>155</td>
    <td>张玲</td>
    <td>87</td>
    <td>合格</td>
    <td>177</td>
    <td>石娜</td>
    <td>87</td>
    <td>合格</td>
    <td>199</td>
    <td>蔡亮</td>
    <td>87</td>
    <td>合格</td>
    <td>221</td>
    <td>王筱灿</td>
    <td>87</td>
    <td>合格</td>
    <td>243</td>
    <td>郭玲</td>
    <td>87</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>134</td>
    <td>喻婉静</td>
    <td>88</td>
    <td>合格</td>
    <td>156</td>
    <td>罗丹丹</td>
    <td>87</td>
    <td>合格</td>
    <td>178</td>
    <td>张根玉</td>
    <td>87</td>
    <td>合格</td>
    <td>200</td>
    <td>汪月</td>
    <td>87</td>
    <td>合格</td>
    <td>222</td>
    <td>戚玉芳</td>
    <td>87</td>
    <td>合格</td>
    <td>244</td>
    <td>李青青</td>
    <td>87</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>135</td>
    <td>郝甜甜</td>
    <td>88</td>
    <td>合格</td>
    <td>157</td>
    <td>褚金翠</td>
    <td>87</td>
    <td>合格</td>
    <td>179</td>
    <td>汤静</td>
    <td>87</td>
    <td>合格</td>
    <td>201</td>
    <td>周圆圆</td>
    <td>87</td>
    <td>合格</td>
    <td>223</td>
    <td>陈际洋</td>
    <td>87</td>
    <td>合格</td>
    <td>245</td>
    <td>朱剑秋</td>
    <td>87</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>136</td>
    <td>方临丽</td>
    <td>88</td>
    <td>合格</td>
    <td>158</td>
    <td>李静</td>
    <td>87</td>
    <td>合格</td>
    <td>180</td>
    <td>孙玥</td>
    <td>87</td>
    <td>合格</td>
    <td>202</td>
    <td>管新兰</td>
    <td>87</td>
    <td>合格</td>
    <td>224</td>
    <td>程小俸</td>
    <td>87</td>
    <td>合格</td>
    <td>246</td>
    <td>何春</td>
    <td>87</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>137</td>
    <td>夏中原</td>
    <td>88</td>
    <td>合格</td>
    <td>159</td>
    <td>邵颜军</td>
    <td>87</td>
    <td>合格</td>
    <td>181</td>
    <td>沈洁</td>
    <td>87</td>
    <td>合格</td>
    <td>203</td>
    <td>夏志鹏</td>
    <td>87</td>
    <td>合格</td>
    <td>225</td>
    <td>汪茂文</td>
    <td>87</td>
    <td>合格</td>
    <td>247</td>
    <td>许辉</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>138</td>
    <td>张敬尊</td>
    <td>88</td>
    <td>合格</td>
    <td>160</td>
    <td>张泊远</td>
    <td>87</td>
    <td>合格</td>
    <td>182</td>
    <td>和治凌</td>
    <td>87</td>
    <td>合格</td>
    <td>204</td>
    <td>余莹莹</td>
    <td>87</td>
    <td>合格</td>
    <td>226</td>
    <td>张玉</td>
    <td>87</td>
    <td>合格</td>
    <td>248</td>
    <td>王德雪</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>139</td>
    <td>韦玉林</td>
    <td>88</td>
    <td>合格</td>
    <td>161</td>
    <td>伍菲</td>
    <td>87</td>
    <td>合格</td>
    <td>183</td>
    <td>陈晶晶</td>
    <td>87</td>
    <td>合格</td>
    <td>205</td>
    <td>徐国平</td>
    <td>87</td>
    <td>合格</td>
    <td>227</td>
    <td>朱阳</td>
    <td>87</td>
    <td>合格</td>
    <td>249</td>
    <td>王俊</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>140</td>
    <td>袁金凤</td>
    <td>88</td>
    <td>合格</td>
    <td>162</td>
    <td>黄晶晶</td>
    <td>87</td>
    <td>合格</td>
    <td>184</td>
    <td>马 浩</td>
    <td>87</td>
    <td>合格</td>
    <td>206</td>
    <td>余婷</td>
    <td>87</td>
    <td>合格</td>
    <td>228</td>
    <td>徐萍</td>
    <td>87</td>
    <td>合格</td>
    <td>250</td>
    <td>徐生辉</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>141</td>
    <td>刘江辉</td>
    <td>88</td>
    <td>合格</td>
    <td>163</td>
    <td>王涛</td>
    <td>87</td>
    <td>合格</td>
    <td>185</td>
    <td>张如意</td>
    <td>87</td>
    <td>合格</td>
    <td>207</td>
    <td>代珊珊</td>
    <td>87</td>
    <td>合格</td>
    <td>229</td>
    <td>韦蘇航</td>
    <td>87</td>
    <td>合格</td>
    <td>251</td>
    <td>叶洋洋</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>142</td>
    <td>吕超</td>
    <td>88</td>
    <td>合格</td>
    <td>164</td>
    <td>马丽苹</td>
    <td>87</td>
    <td>合格</td>
    <td>186</td>
    <td>周兰一</td>
    <td>87</td>
    <td>合格</td>
    <td>208</td>
    <td>董家焰</td>
    <td>87</td>
    <td>合格</td>
    <td>230</td>
    <td>刘树明</td>
    <td>87</td>
    <td>合格</td>
    <td>252</td>
    <td>王佑涛</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>143</td>
    <td>田坤</td>
    <td>88</td>
    <td>合格</td>
    <td>165</td>
    <td>李婷</td>
    <td>87</td>
    <td>合格</td>
    <td>187</td>
    <td>黄鹏</td>
    <td>87</td>
    <td>合格</td>
    <td>209</td>
    <td>黄春艳</td>
    <td>87</td>
    <td>合格</td>
    <td>231</td>
    <td>陈雪</td>
    <td>87</td>
    <td>合格</td>
    <td>253</td>
    <td>杨云</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>144</td>
    <td>史正山</td>
    <td>88</td>
    <td>合格</td>
    <td>166</td>
    <td>付丽君</td>
    <td>87</td>
    <td>合格</td>
    <td>188</td>
    <td>陈妍</td>
    <td>87</td>
    <td>合格</td>
    <td>210</td>
    <td>余娟</td>
    <td>87</td>
    <td>合格</td>
    <td>232</td>
    <td>徐淑娴</td>
    <td>87</td>
    <td>合格</td>
    <td>254</td>
    <td>马燕</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>145</td>
    <td>李保梅</td>
    <td>88</td>
    <td>合格</td>
    <td>167</td>
    <td>金玲</td>
    <td>87</td>
    <td>合格</td>
    <td>189</td>
    <td>张家豪</td>
    <td>87</td>
    <td>合格</td>
    <td>211</td>
    <td>杨婷婷</td>
    <td>87</td>
    <td>合格</td>
    <td>233</td>
    <td>何文谋</td>
    <td>87</td>
    <td>合格</td>
    <td>255</td>
    <td>杨刚</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>146</td>
    <td>王玉</td>
    <td>88</td>
    <td>合格</td>
    <td>168</td>
    <td>李树辉</td>
    <td>87</td>
    <td>合格</td>
    <td>190</td>
    <td>葛建</td>
    <td>87</td>
    <td>合格</td>
    <td>212</td>
    <td>贾永贤</td>
    <td>87</td>
    <td>合格</td>
    <td>234</td>
    <td>申杰</td>
    <td>87</td>
    <td>合格</td>
    <td>256</td>
    <td>何畅</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>147</td>
    <td>牛崇林</td>
    <td>87</td>
    <td>合格</td>
    <td>169</td>
    <td>王宁</td>
    <td>87</td>
    <td>合格</td>
    <td>191</td>
    <td>冷欣月</td>
    <td>87</td>
    <td>合格</td>
    <td>213</td>
    <td>彭治娟</td>
    <td>87</td>
    <td>合格</td>
    <td>235</td>
    <td>吴迪</td>
    <td>87</td>
    <td>合格</td>
    <td>257</td>
    <td>周磊</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>148</td>
    <td>王雪</td>
    <td>87</td>
    <td>合格</td>
    <td>170</td>
    <td>孟林</td>
    <td>87</td>
    <td>合格</td>
    <td>192</td>
    <td>孙士俊</td>
    <td>87</td>
    <td>合格</td>
    <td>214</td>
    <td>孔亮</td>
    <td>87</td>
    <td>合格</td>
    <td>236</td>
    <td>李兰馨</td>
    <td>87</td>
    <td>合格</td>
    <td>258</td>
    <td>朱海峰</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>149</td>
    <td>刘洋</td>
    <td>87</td>
    <td>合格</td>
    <td>171</td>
    <td>邹美</td>
    <td>87</td>
    <td>合格</td>
    <td>193</td>
    <td>桂婷婷</td>
    <td>87</td>
    <td>合格</td>
    <td>215</td>
    <td>潘文君</td>
    <td>87</td>
    <td>合格</td>
    <td>237</td>
    <td>彭倩</td>
    <td>87</td>
    <td>合格</td>
    <td>259</td>
    <td>郑亚珺</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>150</td>
    <td>谢丽娜</td>
    <td>87</td>
    <td>合格</td>
    <td>172</td>
    <td>李海雯</td>
    <td>87</td>
    <td>合格</td>
    <td>194</td>
    <td>王静</td>
    <td>87</td>
    <td>合格</td>
    <td>216</td>
    <td>董瑞</td>
    <td>87</td>
    <td>合格</td>
    <td>238</td>
    <td>牛俊</td>
    <td>87</td>
    <td>合格</td>
    <td>260</td>
    <td>卢伟玲</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>151</td>
    <td>张泽峰</td>
    <td>87</td>
    <td>合格</td>
    <td>173</td>
    <td>吴凤林</td>
    <td>87</td>
    <td>合格</td>
    <td>195</td>
    <td>王婷</td>
    <td>87</td>
    <td>合格</td>
    <td>217</td>
    <td>祝源</td>
    <td>87</td>
    <td>合格</td>
    <td>239</td>
    <td>丁丽</td>
    <td>87</td>
    <td>合格</td>
    <td>261</td>
    <td>刘旭升</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>152</td>
    <td>李红</td>
    <td>87</td>
    <td>合格</td>
    <td>174</td>
    <td>孙利平</td>
    <td>87</td>
    <td>合格</td>
    <td>196</td>
    <td>王亚兰</td>
    <td>87</td>
    <td>合格</td>
    <td>218</td>
    <td>陶权</td>
    <td>87</td>
    <td>合格</td>
    <td>240</td>
    <td>吴青苗</td>
    <td>87</td>
    <td>合格</td>
    <td>262</td>
    <td>郭艳霞</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>153</td>
    <td>马晓萌</td>
    <td>87</td>
    <td>合格</td>
    <td>175</td>
    <td>王祖霞</td>
    <td>87</td>
    <td>合格</td>
    <td>197</td>
    <td>甘甜</td>
    <td>87</td>
    <td>合格</td>
    <td>219</td>
    <td>雷成</td>
    <td>87</td>
    <td>合格</td>
    <td>241</td>
    <td>杨翠红</td>
    <td>87</td>
    <td>合格</td>
    <td>263</td>
    <td>魏红玲</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>154</td>
    <td>杨昌艳</td>
    <td>87</td>
    <td>合格</td>
    <td>176</td>
    <td>段海林</td>
    <td>87</td>
    <td>合格</td>
    <td>198</td>
    <td>张靖峰</td>
    <td>87</td>
    <td>合格</td>
    <td>220</td>
    <td>张延荣</td>
    <td>87</td>
    <td>合格</td>
    <td>242</td>
    <td>康娟娟</td>
    <td>87</td>
    <td>合格</td>
    <td>264</td>
    <td>冯晨忱</td>
    <td>86</td>
    <td>合格</td>
    </tr>
</tbody>
</table>

<table>
<tbody>
    <tr>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    <td>排名</td>
    <td>姓 名</td>
    <td>测评得分</td>
    <td>考核<br />
    结果</td>
    </tr>
    <tr>
    <td>265</td>
    <td>袁锐</td>
    <td>86</td>
    <td>合格</td>
    <td>287</td>
    <td>张建树</td>
    <td>86</td>
    <td>合格</td>
    <td>309</td>
    <td>任燕</td>
    <td>86</td>
    <td>合格</td>
    <td>331</td>
    <td>杨舒涵</td>
    <td>86</td>
    <td>合格</td>
    <td>353</td>
    <td>王 芳</td>
    <td>86</td>
    <td>合格</td>
    <td>375</td>
    <td>杜雨微</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>266</td>
    <td>陶立鑫</td>
    <td>86</td>
    <td>合格</td>
    <td>288</td>
    <td>吴锐良</td>
    <td>86</td>
    <td>合格</td>
    <td>310</td>
    <td>李敏</td>
    <td>86</td>
    <td>合格</td>
    <td>332</td>
    <td>刘海萍</td>
    <td>86</td>
    <td>合格</td>
    <td>354</td>
    <td>陈昆</td>
    <td>86</td>
    <td>合格</td>
    <td>376</td>
    <td>杨珍珍</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>267</td>
    <td>王振雨</td>
    <td>86</td>
    <td>合格</td>
    <td>289</td>
    <td>何亚宇</td>
    <td>86</td>
    <td>合格</td>
    <td>311</td>
    <td>吴倩</td>
    <td>86</td>
    <td>合格</td>
    <td>333</td>
    <td>吴彦雪</td>
    <td>86</td>
    <td>合格</td>
    <td>355</td>
    <td>易玉嫣</td>
    <td>86</td>
    <td>合格</td>
    <td>377</td>
    <td>邹法林</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>268</td>
    <td>熊红梅</td>
    <td>86</td>
    <td>合格</td>
    <td>290</td>
    <td>王洪梅</td>
    <td>86</td>
    <td>合格</td>
    <td>312</td>
    <td>殷丽萍</td>
    <td>86</td>
    <td>合格</td>
    <td>334</td>
    <td>金茶青</td>
    <td>86</td>
    <td>合格</td>
    <td>356</td>
    <td>陈姝莉</td>
    <td>86</td>
    <td>合格</td>
    <td>378</td>
    <td>张作文</td>
    <td>86</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>269</td>
    <td>梅冬</td>
    <td>86</td>
    <td>合格</td>
    <td>291</td>
    <td>李运东</td>
    <td>86</td>
    <td>合格</td>
    <td>313</td>
    <td>邱珂</td>
    <td>86</td>
    <td>合格</td>
    <td>335</td>
    <td>杨秋林</td>
    <td>86</td>
    <td>合格</td>
    <td>357</td>
    <td>周丹丹</td>
    <td>86</td>
    <td>合格</td>
    <td>379</td>
    <td>周佩</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>270</td>
    <td>陈鲲</td>
    <td>86</td>
    <td>合格</td>
    <td>292</td>
    <td>饶壮</td>
    <td>86</td>
    <td>合格</td>
    <td>314</td>
    <td>李英杰</td>
    <td>86</td>
    <td>合格</td>
    <td>336</td>
    <td>汤亚兰</td>
    <td>86</td>
    <td>合格</td>
    <td>358</td>
    <td>米雪玉</td>
    <td>86</td>
    <td>合格</td>
    <td>380</td>
    <td>白小玲</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>271</td>
    <td>马小璐</td>
    <td>86</td>
    <td>合格</td>
    <td>293</td>
    <td>李成君</td>
    <td>86</td>
    <td>合格</td>
    <td>315</td>
    <td>余娇娇</td>
    <td>86</td>
    <td>合格</td>
    <td>337</td>
    <td>张庭</td>
    <td>86</td>
    <td>合格</td>
    <td>359</td>
    <td>李佳威</td>
    <td>86</td>
    <td>合格</td>
    <td>381</td>
    <td>杨阳</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>272</td>
    <td>汪雨</td>
    <td>86</td>
    <td>合格</td>
    <td>294</td>
    <td>纪昕苒</td>
    <td>86</td>
    <td>合格</td>
    <td>316</td>
    <td>杨雨健</td>
    <td>86</td>
    <td>合格</td>
    <td>338</td>
    <td>李欣</td>
    <td>86</td>
    <td>合格</td>
    <td>360</td>
    <td>胡瑞</td>
    <td>86</td>
    <td>合格</td>
    <td>382</td>
    <td>李芳</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>273</td>
    <td>赵高猛</td>
    <td>86</td>
    <td>合格</td>
    <td>295</td>
    <td>王赟阁</td>
    <td>86</td>
    <td>合格</td>
    <td>317</td>
    <td>刘新宇</td>
    <td>86</td>
    <td>合格</td>
    <td>339</td>
    <td>艾银</td>
    <td>86</td>
    <td>合格</td>
    <td>361</td>
    <td>董明明</td>
    <td>86</td>
    <td>合格</td>
    <td>383</td>
    <td>林鸽</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>274</td>
    <td>严兆鹏</td>
    <td>86</td>
    <td>合格</td>
    <td>296</td>
    <td>黄金露</td>
    <td>86</td>
    <td>合格</td>
    <td>318</td>
    <td>伍晶晶</td>
    <td>86</td>
    <td>合格</td>
    <td>340</td>
    <td>彭思琦</td>
    <td>86</td>
    <td>合格</td>
    <td>362</td>
    <td>史冀豫</td>
    <td>86</td>
    <td>合格</td>
    <td>384</td>
    <td>张莹莹</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>275</td>
    <td>潘家成</td>
    <td>86</td>
    <td>合格</td>
    <td>297</td>
    <td>李澜澜</td>
    <td>86</td>
    <td>合格</td>
    <td>319</td>
    <td>邱松</td>
    <td>86</td>
    <td>合格</td>
    <td>341</td>
    <td>李成凤</td>
    <td>86</td>
    <td>合格</td>
    <td>363</td>
    <td>刘洋</td>
    <td>86</td>
    <td>合格</td>
    <td>385</td>
    <td>孟欣</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>276</td>
    <td>李贞</td>
    <td>86</td>
    <td>合格</td>
    <td>298</td>
    <td>阮华</td>
    <td>86</td>
    <td>合格</td>
    <td>320</td>
    <td>吴微微</td>
    <td>86</td>
    <td>合格</td>
    <td>342</td>
    <td>谢海燕</td>
    <td>86</td>
    <td>合格</td>
    <td>364</td>
    <td>熊莹莹</td>
    <td>86</td>
    <td>合格</td>
    <td>386</td>
    <td>张丽</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>277</td>
    <td>黄骞</td>
    <td>86</td>
    <td>合格</td>
    <td>299</td>
    <td>方亚勤</td>
    <td>86</td>
    <td>合格</td>
    <td>321</td>
    <td>吴敏</td>
    <td>86</td>
    <td>合格</td>
    <td>343</td>
    <td>孟小卉</td>
    <td>86</td>
    <td>合格</td>
    <td>365</td>
    <td>童晶</td>
    <td>86</td>
    <td>合格</td>
    <td>387</td>
    <td>江静</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>278</td>
    <td>袁华宁</td>
    <td>86</td>
    <td>合格</td>
    <td>300</td>
    <td>熊璐</td>
    <td>86</td>
    <td>合格</td>
    <td>322</td>
    <td>汪培培</td>
    <td>86</td>
    <td>合格</td>
    <td>344</td>
    <td>宋晓寒</td>
    <td>86</td>
    <td>合格</td>
    <td>366</td>
    <td>刘芳芳</td>
    <td>86</td>
    <td>合格</td>
    <td>388</td>
    <td>黄瑛</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>279</td>
    <td>汤诗瑶</td>
    <td>86</td>
    <td>合格</td>
    <td>301</td>
    <td>郑梦梦</td>
    <td>86</td>
    <td>合格</td>
    <td>323</td>
    <td>胡新新</td>
    <td>86</td>
    <td>合格</td>
    <td>345</td>
    <td>郭芳</td>
    <td>86</td>
    <td>合格</td>
    <td>367</td>
    <td>邬亚雯</td>
    <td>86</td>
    <td>合格</td>
    <td>389</td>
    <td>惠昕</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>280</td>
    <td>王欣洁</td>
    <td>86</td>
    <td>合格</td>
    <td>302</td>
    <td>杨欣欣</td>
    <td>86</td>
    <td>合格</td>
    <td>324</td>
    <td>陶杨</td>
    <td>86</td>
    <td>合格</td>
    <td>346</td>
    <td>屈思名</td>
    <td>86</td>
    <td>合格</td>
    <td>368</td>
    <td>徐元辰</td>
    <td>86</td>
    <td>合格</td>
    <td>390</td>
    <td>易有娟</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>281</td>
    <td>张含郁</td>
    <td>86</td>
    <td>合格</td>
    <td>303</td>
    <td>张晏</td>
    <td>86</td>
    <td>合格</td>
    <td>325</td>
    <td>程俊</td>
    <td>86</td>
    <td>合格</td>
    <td>347</td>
    <td>李瑞敏</td>
    <td>86</td>
    <td>合格</td>
    <td>369</td>
    <td>丁亿</td>
    <td>86</td>
    <td>合格</td>
    <td>391</td>
    <td>田莉莉</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>282</td>
    <td>刘连慧</td>
    <td>86</td>
    <td>合格</td>
    <td>304</td>
    <td>陶丽丽</td>
    <td>86</td>
    <td>合格</td>
    <td>326</td>
    <td>陈桂花</td>
    <td>86</td>
    <td>合格</td>
    <td>348</td>
    <td>董国玲</td>
    <td>86</td>
    <td>合格</td>
    <td>370</td>
    <td>刘宁</td>
    <td>86</td>
    <td>合格</td>
    <td>392</td>
    <td>张可</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>283</td>
    <td>江小艳</td>
    <td>86</td>
    <td>合格</td>
    <td>305</td>
    <td>付刚</td>
    <td>86</td>
    <td>合格</td>
    <td>327</td>
    <td>许安玉</td>
    <td>86</td>
    <td>合格</td>
    <td>349</td>
    <td>刘宗敏</td>
    <td>86</td>
    <td>合格</td>
    <td>371</td>
    <td>文婕</td>
    <td>86</td>
    <td>合格</td>
    <td>393</td>
    <td>黄丹丹</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>284</td>
    <td>印子建</td>
    <td>86</td>
    <td>合格</td>
    <td>306</td>
    <td>何啸东</td>
    <td>86</td>
    <td>合格</td>
    <td>328</td>
    <td>聂书炜</td>
    <td>86</td>
    <td>合格</td>
    <td>350</td>
    <td>唐恩泽</td>
    <td>86</td>
    <td>合格</td>
    <td>372</td>
    <td>高洋</td>
    <td>86</td>
    <td>合格</td>
    <td>394</td>
    <td>朱光谱</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>285</td>
    <td>冯春梅</td>
    <td>86</td>
    <td>合格</td>
    <td>307</td>
    <td>方辰</td>
    <td>86</td>
    <td>合格</td>
    <td>329</td>
    <td>汪海涛</td>
    <td>86</td>
    <td>合格</td>
    <td>351</td>
    <td>郭鹏</td>
    <td>86</td>
    <td>合格</td>
    <td>373</td>
    <td>徐文杰</td>
    <td>86</td>
    <td>合格</td>
    <td>395</td>
    <td>徐倩</td>
    <td>85</td>
    <td>合格</td>
    </tr>
    <tr>
    <td>286</td>
    <td>吕蓓蓓</td>
    <td>86</td>
    <td>合格</td>
    <td>308</td>
    <td>何军</td>
    <td>86</td>
    <td>合格</td>
    <td>330</td>
    <td>杜莎莎</td>
    <td>86</td>
    <td>合格</td>
    <td>352</td>
    <td>邹晓慧</td>
    <td>86</td>
    <td>合格</td>
    <td>374</td>
    <td>孟莹莹</td>
    <td>86</td>
    <td>合格</td>
    <td>396</td>
    <td>冯琳云</td>
    <td>85</td>
    <td>合格</td>
    </tr>
</tbody>
</table>
</div>

<script type="text/javascript" src="wyjs/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
//根据屏幕尺寸引用js
if (screen && screen.width > 480) {
    document.write('<script type="text/javascript" charset="utf-8" src="wyjs/scroll-x.js"><\/script><script type="text/javascript">dragMoveX(".table-responsive");<\/script>');
}
</script>
<script type="text/javascript">
$(document).ready(function(){
    var that=$("#conbox").find("table");
    //console.log(that);
    //console.log(that.length);
    //给所有table元素标签外层嵌套一个div标签
    that.wrap('<div class="table-responsive"></div>');
    for(var i=0; i<that.length;i++)
    {
    //给所有table元素标签添加一个样式类
    that.eq(i).addClass("table");
    }
});
</script>

CSS部分:

table{border-collapse:collapse; border-spacing:0;}

/* 表格 */
.table-responsive{overflow-x:auto;white-space: nowrap;}
.table th,.table td {margin:0;-webkit-tap-highlight-color:rgba(0,0,0,0);border-collapse:collapse;border-spacing:0;/* white-space: nowrap; */}
.table {margin:15px auto;border-spacing:0;}
.table tr {transition:all .3s;-webkit-transition:all .3s;}
.table th {text-align:left;font-weight:400;}
.table thead tr,.table tbody tr:hover {background-color:#f2f2f2;}
.table th,.table td {border:1px solid #e6e6e6;}

@media only screen and (min-width:768px) {
/* 表格 */
.table {/* min-width:60%; */width:100%;}
.table th,.table td {padding:9px 15px;min-height:30px;line-height:30px;font-size:16px;}
/* H5的时候,隐藏滚动条 */
/* .table-responsive::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
} */
/*禁止复制*/
.table-responsive{
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
}

/* 手机端 */
@media only screen and (max-width:767px) {
/* 表格 */
.table {width:100%;}
.table th,.table td {padding:9px 7px;min-height:20px;line-height:20px;font-size:14px;}
}

scroll-x.js内容:


/**
 * 页面中调用: dragMoveX(".table-responsive");
 * 拖动内容,滚动条滚动,横向
 * @param {string} container 需要拖动的面板
 */
function dragMoveX(container) {
    var flag;
    var downX;
    var scrollLeft;
    //鼠标按下
    $(document.body).on("mousedown", container, function (event) {
        console.log('mousedown')
        flag = true;
        downX = event.clientX;
        scrollLeft = $(this).scrollLeft();
    });
    //鼠标移动
    $(document).on("mousemove", function (event) {
        console.log('mousemove',flag,event.clientX)
        if (flag) {
            var moveX = event.clientX;
            var scrollX = moveX - downX;
            // console.log("moveX" + moveX);
            // console.log("scrollX" + scrollX);
            if (scrollX < 0 && scrollLeft > 0) {
                $(container).scrollLeft(scrollLeft - scrollX)
            }
            else {
                $(container).scrollLeft(scrollLeft - scrollX)
            }
        }
    });
    //鼠标释放
    $(document).on("mouseup", function () {
        console.log('mouseup')
        flag = false;
    });
    /**
     * 注意:与 mouseout 事件不同,mouseleave 事件只有在鼠标指针离开被选元素时被触发,mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
     * 所以:如果mouseout的子元素存在溢出,并添加了超出加滚动,那么刚进入也会触发该事件,所以这里就不能使用。
     * */
    //鼠标移出元素
    $(container).on("mouseleave", function (event) {
        console.log('mouseleave',event.pageX,document.body.offsetWidth)
        // flag = false;
        if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
            console.log('在元素上移出')
            flag = false;
        }
    });
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大海哪蓝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值