这个是我现在的html页面 我想改成所有字都在一行显示 有横滚动条的
回复讨论(解决方案)
有代码么？？？
<table width="100%"> <tr> <td align="center" key="UserName" style="background-color:lightblue;"> 员工姓名 </td> <td align="center" key="DepLV" style="background-color:lightblue;" > 职级 </td> <td align="center" key="HrisDate" style="background-color:lightblue;"> 入职时间 </td> <td align="center" key="date" style="background-color:lightblue;"> 升迁时间 </td> <td align="center" key="T6" style="background-color:lightyellow;"> 考核内容 </td> <td align="center" key="M1" style="background-color:lightyellow;" > M1 </td> <td align="center" key="M2" style="background-color:lightyellow;" > M2 </td> <td align="center" key="M3" style="background-color:lightyellow;" > M3 </td> <td align="center" key="M4" style="background-color:lightyellow;" > M4 </td> <td align="center" key="M5" style="background-color:lightyellow;" > M5 </td> <td align="center" key="M6" style="background-color:lightyellow;" > M6 </td> <td align="center" key="M7" style="background-color:lightyellow;" > M7 </td> <td align="center" key="M8" style="background-color:lightyellow;" > M8 </td> <td align="center" key="T7" style="background-color:lightyellow;" > 营业员考核 </td> <td align="center" key="T8" style="background-color:lightblue;" > 考核内容 </td> <td align="center" key="M9" style="background-color:lightblue;" > M9 </td> <td align="center" key="M10" style="background-color:lightblue;" > M10 </td> <td align="center" key="M11" style="background-color:lightblue;" > M11 </td> <td align="center" key="M12" style="background-color:lightblue;" > M12 </td> <td align="center" key="M13" style="background-color:lightblue;" > M13 </td> <td align="center" key="M14" style="background-color:lightblue;" > M14 </td> <td align="center" key="M15" style="background-color:lightblue;" > M15 </td> <td align="center" key="T9" style="background-color:lightblue;" > 代店考核 </td> <td align="center" key="T10" style="background-color:lightpink;" > 考核内容 </td> <td align="center" key="M16" style="background-color:lightpink;" > M16 </td> <td align="center" key="M17" style="background-color:lightpink;" > M17 </td> <td align="center" key="M18" style="background-color:lightpink;" > M18 </td> <td align="center" key="M19" style="background-color:lightpink;" > M19 </td> <td align="center" key="M20" style="background-color:lightpink;" > M20 </td> <td align="center" key="M21" style="background-color:lightpink;" > M21 </td> <td align="center" key="M22" style="background-color:lightpink;" > M22 </td> <td align="center" key="M23" style="background-color:lightpink;" > M23 </td> <td align="center" key="T11" style="background-color:lightpink;" > 店长考核 </td> <td align="center" key="T1" style="background-color:lightskyblue;" > 追踪考核第一季 </td> <td align="center" key="T2" style="background-color:lightskyblue;" > 追踪考核第二季 </td> <td align="center" key="T3" style="background-color:lightskyblue;" > 追踪考核第三季 </td> <td align="center" key="T4" style="background-color:lightskyblue;" > 追踪考核第四季 </td> </tr>
有代码么？？？ 发了
给表格设个固定的长度就可以了 比如2000px,然后外面用一个固定的宽度的div设置样式属性overflow:scroll;
<div style="width:980px; overflow:scroll; border:1px solid red;"><table style="width:2000px;"> <tr> <td align="center" key="UserName" style="background-color:lightblue;"> 员工姓名 </td> <td align="center" key="DepLV" style="background-color:lightblue;" > 职级 </td> <td align="center" key="HrisDate" style="background-color:lightblue;"> 入职时间 </td> <td align="center" key="date" style="background-color:lightblue;"> 升迁时间 </td> <td align="center" key="T6" style="background-color:lightyellow;"> 考核内容 </td> <td align="center" key="M1" style="background-color:lightyellow;" > M1 </td> <td align="center" key="M2" style="background-color:lightyellow;" > M2 </td> <td align="center" key="M3" style="background-color:lightyellow;" > M3 </td> <td align="center" key="M4" style="background-color:lightyellow;" > M4 </td> <td align="center" key="M5" style="background-color:lightyellow;" > M5 </td> <td align="center" key="M6" style="background-color:lightyellow;" > M6 </td> <td align="center" key="M7" style="background-color:lightyellow;" > M7 </td> <td align="center" key="M8" style="background-color:lightyellow;" > M8 </td> <td align="center" key="T7" style="background-color:lightyellow;" > 营业员考核 </td> <td align="center" key="T8" style="background-color:lightblue;" > 考核内容 </td> <td align="center" key="M9" style="background-color:lightblue;" > M9 </td> <td align="center" key="M10" style="background-color:lightblue;" > M10 </td> <td align="center" key="M11" style="background-color:lightblue;" > M11 </td> <td align="center" key="M12" style="background-color:lightblue;" > M12 </td> <td align="center" key="M13" style="background-color:lightblue;" > M13 </td> <td align="center" key="M14" style="background-color:lightblue;" > M14 </td> <td align="center" key="M15" style="background-color:lightblue;" > M15 </td> <td align="center" key="T9" style="background-color:lightblue;" > 代店考核 </td> <td align="center" key="T10" style="background-color:lightpink;" > 考核内容 </td> <td align="center" key="M16" style="background-color:lightpink;" > M16 </td> <td align="center" key="M17" style="background-color:lightpink;" > M17 </td> <td align="center" key="M18" style="background-color:lightpink;" > M18 </td> <td align="center" key="M19" style="background-color:lightpink;" > M19 </td> <td align="center" key="M20" style="background-color:lightpink;" > M20 </td> <td align="center" key="M21" style="background-color:lightpink;" > M21 </td> <td align="center" key="M22" style="background-color:lightpink;" > M22 </td> <td align="center" key="M23" style="background-color:lightpink;" > M23 </td> <td align="center" key="T11" style="background-color:lightpink;" > 店长考核 </td> <td align="center" key="T1" style="background-color:lightskyblue;" > 追踪考核第一季 </td> <td align="center" key="T2" style="background-color:lightskyblue;" > 追踪考核第二季 </td> <td align="center" key="T3" style="background-color:lightskyblue;" > 追踪考核第三季 </td> <td align="center" key="T4" style="background-color:lightskyblue;" > 追踪考核第四季 </td> </tr> </table></div>
想要所有文字都在同一行显示，并且有横滚动条的效果，可以改成 style="background-color:lightpink; white-space:nowrap;"
white-space:nowrap;" 的意思是不折行
想要所有文字都在同一行显示，并且有横滚动条的效果，可以改成 style="background-color:lightpink; white-space:nowrap;"
white-space:nowrap;" 的意思是不折行
你的意思是每个单元格有滚动条？
