一個可拖拽列寬表格實例演示
2024-05-06 14:20:49
供稿：網友
代碼如下:
<DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{
font:12px/1.5 Tahoma;
}
#gannt_left{
width:500px;
}
#left-scroll-panel{
width:520px;
height:100px;
overflow-y: auto;
}
table{
table-layout:fixed;
border-collapse: collapse;
border-spacing: 0px;
text-align:center;
width:500px;
}
table,th,td{
border:1px solid #afe0ea;
}
th,td{
height:20px;
line-height:20px;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal;
word-break:keep-all;
}
th{
background:#adf5ff;
}
td{
background:#f6fcff;
}
#gannt_grid,#gannt_grid td{
border-top:0px none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="gannt_left">
<div id="left-scroll-panel" class="scroll-panel">
<table id="gannt_grid">
<thead>
<tr>
<th width="30">序號</th>
<th width="35">操作</th>
<th>標題</th>
<th width="80">執行人</th>
<th width="80">開始時間</th>
<th width="80">結束時間</th>
<th width="30">天數</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>編輯</td>
<td>任務標題：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>2</td>
<td>編輯</td>
<td>任務標題：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>3</td>
<td>編輯</td>
<td>任務標題：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>4</td>
<td>編輯</td>
<td>任務標題：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
<tr>
<td>5</td>
<td>編輯</td>
<td>任務標題：阿斯卡是大家啊</td>
<td>Firefox</td>
<td>2012-07-15</td>
<td>2012-08-15</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
(function(){ //fixed table header ，還可以封裝一下做成類
