td{
width:100px
height:100px
overflow:hidden
}
应该是可以的
通过设置宽高就可以,我贴段代码给你看下:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
table{
width:300px
height:200px
color:#ccc
border:1px solid #f60
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>出生日期</th>
</tr>
<tr>
<td>王明</td>
<td>31</td>
<td>男</td>
<td>1985年3月25</td>
</tr>
<tr>
<td>李玉</td>
<td>24</td>
<td>女</td>
<td>1993年7月8</td>
</tr>
<tr>
<td>唐莹</td>
<td>27</td>
<td>女</td>
<td>1990年6月23</td>
</tr>
<tr>
<td>胡洁</td>
<td>26</td>
<td>女</td>
<td>1991年5月25</td>
</tr>
</table>
</body>
</html>
具体的你可以去php中文网上看下这块的基础知识,希望对你有帮助!
可以参考此样例:
.table{width:100%overflow-x: scrollbackground-color:#7c95b5}.fixedTable{width:160%text-align: centercolor:#ffffont-size:14pxborder-collapse:collapse}.fixedTable tr{line-height: 30pxborder:1px solid #fff}.fixedTable tr:first-child{height:40pxline-height: 40pxbackground-color:cadetblue}.fixedTable td:first-child{position:absolutewidth:105pxbackground-color:cadetblueborder:1px solid #fffmargin:-1px 0px 0px -1px}.fixedColumn{width:99px}
<html>
<head>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no">
<meta charset="utf-8">
<title>使用css固定table第一列</title>
<link href="css/table.css" rel="stylesheet"/>
</head>
<body>
<div class="table">
<table class="fixedTable" border="1">
<tr><td>固定列</td><td class="fixedColumn"></td><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td><td>第六列</td><td>第七列</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><td>固定列</td><td class="fixedColumn"></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
</table>
</div>
</body></html>
View Code
适用移动端
转载于:www.mdcode.cn