整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、遇問題：
產品說：“這張表我想在手機端顯示。”
我：“顯示不了，手機屏幕太窄了，好多數據無法顯示。”
一個小時后......
產品說：“要不你弄個滑動吧，我左右滑動查看”
我：“好的”（竟然被你想到了！！！）
N個小時后.....
產品說：“我向下滑動看不到標題了”
我：“那我在把標題固定住。。。。”
一張列表中需要展示多行多列數據，頁面太小，又要支持手機端。
二、解決思路：
1.CSS中有overflow屬性可以對溢出元素進行隱藏
2.構建4個table,圖中1.“公司/日期”2.時間 3.公司 4.數據內容
3.通過監聽右邊滾動條滑動距離控制第3個table
3.通過監聽下邊滾動條滑動距離控制第2個tablesasasasa
三、偽代碼
<div style="">
<div id="div1">
<table >
</table>
</div>
<div id="div2">
<table style="width:12900px;">
</table>
</div>
<div id="div3">
<table>
</table>
</div>
<div id="div4">
<table id="table1" style="width:12900px;">
</table>
</div>
</div>
<script>
$('#table1').parent("div").each(function () {
$(this).data({sl: this.scrollLeft, st: this.scrollTop});
}).scroll(function () {
var sl = this.scrollLeft, st = this.scrollTop;
$("#div2").scrollLeft(sl);
$("#div3").scrollTop(st);
});
</script>
四、解析
這種適用于簡單表格固定表頭首列，滾動條高度是17px，當我們設置表格寬度和高度時候要注意這個高度，不然會錯位。
演示地址：
[演示地址](http://47.105.36.188:3030/toutiao/CSS實現的Table表頭固定/index.html)
[源代碼下載](https://github.com/harryluo163/toutiao/tree/master/CSS實現的Table表頭固定)
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格實例
實例
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：:
如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格：
實例
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表頭
表格的表頭使用 <th> 標簽進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文本：
實例
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下：
昨天我們在《使用HTML添加表格1（基本元素）——零基礎自學網頁制作》（文章結尾有目錄）中學習了如何向網頁中添加基礎表格，今天我們來學習如何為基礎表格添加表頭和表腳信息。先看看效果吧。
老規矩，先介紹表頭和表腳的標簽。
表頭：<thead></thead>
這個標簽只是告訴頁面這里是表頭，如果添加文字的話還需要<tr></tr>列標簽和<td></td>行標簽。
如果要添加表頭的話，直接在代碼中添加這個標簽是不行的，我們還需要將其他表格內容放置到<tbody></tbody>中，這樣html才能知道哪里是表格內容，哪里是表頭內容。
示例代碼如下所示：
<table border = "1" width = "100%">
<thead><!--表頭開始標簽-->
<tr>
<td>表格的頭部信息</td>
</tr>
</thead><!--表頭結束標簽--><tbody><!--表格內容開始標簽-->
<caption>表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody><!--表格內容結束標簽-->
</table>代碼效果如圖：
大家通過觀察發現，表格的標題標簽<caption></caption>雖然寫在<tbody></tbody>里面，但是顯示的時候，卻一直在表格的最上面。
合并單元格操作：我們希望表頭信息能夠在表格中獨占一列，這樣就需要介紹如何修改<td></td>行標簽中的colspan屬性。
示例代碼如下：
<thead>
<!--表頭開始標簽--><tr><td colspan = "2">表格的頭部信息</td></tr></thead><!--表頭結束標簽-->修改后效果如下：
colspan的意思就是"列合并"，col是column（列、縱隊）的縮寫，span是跨度的意思。
colspan就是為<td></td>列標簽指定跨越幾個列向單元格。
這里我們要合并兩個，故colspan="2"，2一定要用半角引號引起來！
那合并行單元格的屬性是什么呢？其實反推一下也能猜出。行的英文是row，因此rowspan就是"行合并"。
代碼示例如下：我們把"一行一列"和"二行一列"縱向合并。
<tr>
<td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>效果如圖所示：
大家注意，如果您合并成了"一行一列"，那就要把"二列一行"刪掉。
最后，我們來寫一下表格的腳部信息。
腳部標簽如下：<tfoot></tfoot>
使用方法和<thead></thead>一樣，在中間添加列行標簽來顯示內容。
同時也要給<td></td>行標簽進行列向合并單元格，即添加colspan="2"。
示例代碼如下：
<tfoot><tr><td colspan = "2">表格的腳部信息</td></tr></tfoot>值得注意的是：這塊代碼的位置在<thead></thead>之后，<tbody></tbody>之前。
示例代碼如下：
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "2">表格的頭部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "2">表格的腳部信息</td>
</tr>
</tfoot>
<tbody>
<caption>表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td rowspan = "2">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列二行</td>
</tr>
</tbody>
</table>頁面效果如下：
今天的內容結束了。明天我們繼續講解列表元素的其他屬性。
喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
