如果您想要一个只有列水平滚动的表,则可以
position:absolute第一列(并明确指定其宽度),然后将整个表包装在一个
overflow-x:scroll块中。不过,请不要在IE7中尝试此操作…
相关的HTML和CSS:
table { border-collapse: separate; border-spacing: 0; border-top: 1px solid grey;}td, th { margin: 0; border: 1px solid grey; white-space: nowrap; border-top-width: 0px;}div { width: 500px; overflow-x: scroll; margin-left: 5em; overflow-y: visible; padding: 0;}.headcol { position: absolute; width: 5em; left: 0; top: auto; border-top-width: 1px; margin-top: -1px; }.headcol:before { content: 'Row ';}.long { background: yellow; letter-spacing: 1em;}<div><table> <tr><th >1</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th >2</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th >3</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th >4</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th >5</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr> <tr><th >6</th><td >QWERTYUIOPASDFGHJKLZXCVBNM</td><td >QWERTYUIOPASDFGHJKLZXCVBNM</td></tr></table></div>


