html表格取消內(nèi)部豎線的五個(gè)步驟，實(shí)例在線

tml表格取消內(nèi)部豎線的五個(gè)步驟，實(shí)例在線

表格取消內(nèi)部豎線的五個(gè)步驟

如果只是想取消表格內(nèi)部的豎線，則只需下方的前兩個(gè)步驟，如果需要對(duì)表格進(jìn)行進(jìn)一步的美化，則可以繼續(xù)設(shè)置其它的步驟：

不要設(shè)置table元素的border屬性；
只設(shè)置tr表格行的border-bottom屬性
將table元素的width設(shè)置為100%；
將單元格內(nèi)的內(nèi)容設(shè)置為水平居中顯示；
間隔設(shè)置表格行的background-color屬性，表格行可以更清晰；

表格取消內(nèi)部豎線實(shí)例代碼，及在線編輯器

<table id='t1'>
  <tr><th>A</th><th>B</th><th>C</th></tr>
  <tr><td>a</td><td>b</td><td>c</td></tr>
  <tr><td>e</td><td>f</td><td>g</td></tr>
  <tr><td>h</td><td>i</td><td>j</td></tr>
  <tr><td>k</td><td>l</td><td>m</td></tr>
</table>

<style>
  #t1{width:100%;height:200px;}
  #t1 tr{border-bottom:1px solid skyblue;text-align:center;}
  #t1 th{text-align:center;}
  #t1 tr:nth-child(odd){background-color:skyblue;}
  #t1 tr:hover{background-color:orange;}
</style>

笨鳥工具-璞玉天成，大器晚成
原文：html表格取消內(nèi)部豎線的五個(gè)步驟，實(shí)例在線 - HTML教程

CSS table表格 thead固定 tbody滾動(dòng)效果

由于項(xiàng)目需要，在表格中，當(dāng)數(shù)據(jù)量越來越多時(shí)，就會(huì)出現(xiàn)滾動(dòng)條，而在滾動(dòng)的過程中，默認(rèn)情況下表格頭部會(huì)跟著表格內(nèi)容一起滾動(dòng)，導(dǎo)致看不到頭部對(duì)應(yīng)的字段名，影響體驗(yàn)效果！

實(shí)現(xiàn)思路：

將內(nèi)容要滾動(dòng)的區(qū)域控制在 tbody 標(biāo)簽中添加 overflow-y: auto; 樣式，給 tr 標(biāo)簽添加 table-layout:fixed; (這是核心)樣式，由于 tbody 有了滾動(dòng)條后，滾動(dòng)條也要占位，又會(huì)導(dǎo)致 tbody 和 thead 不對(duì)齊，所以在設(shè)置 tbody 的寬度時(shí)要把滾動(dòng)條的寬度也加上【如果不想顯示滾動(dòng)條的話，可以把滾動(dòng)條的寬度設(shè)置為0px，滾動(dòng)條就沒有了。

下面是效果圖，具體完整實(shí)例代碼也在下面：

完整實(shí)例代碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>純CSS table表格 thead固定 tbody滾動(dòng)</title>
    <style>
        .table-box {
            margin: 100px auto;
            width: 1024px;
        }
 
        /* 滾動(dòng)條寬度 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
        }
 
        /* 滾動(dòng)條顏色 */
        ::-webkit-scrollbar-thumb {
            background-color: #27314d;
        }
 
        table {
            width: 100%;
            border-spacing: 0px;
            border-collapse: collapse;
        }
 
        table caption{
            font-weight: bold;
            font-size: 24px;
            line-height: 50px;
        }
 
        table th, table td {
            height: 50px;
            text-align: center;
            border: 1px solid gray;
        }
 
        table thead {
            color: white;
            background-color: #38F;
        }
 
        table tbody {
            display: block;
            width: calc(100% + 8px); /*這里的8px是滾動(dòng)條的寬度*/
            height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
 
        table tfoot {
            background-color: #71ea71;
        }
 
        table thead tr, table tbody tr, table tfoot tr {
            box-sizing: border-box;
            table-layout: fixed;
            display: table;
            width: 100%;
        }
 
        table tbody tr:nth-of-type(odd) {
            background: #EEE;
        }
 
        table tbody tr:nth-of-type(even) {
            background: #FFF;
        }
 
        table tbody tr td{
            border-bottom: none;
        }
 
    </style>
</head>
 
<body>
    <section class="table-box">
        <table cellpadding="0" cellspacing="0">
            <caption>純CSS table表格 thead固定 tbody滾動(dòng)</caption>
            
            <thead>
                <tr>
                    <th>序 號(hào)</th>
                    <th>姓 名</th>
                    <th>年 齡</th>
                    <th>性 別</th>
                    <th>手 機(jī)</th>
                </tr>
            </thead>
 
            <tbody>
                <tr>
                    <td>001</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>008</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
            </tbody>
 
            <tfoot>
                <tr>
                    <td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
                </tr>
            </tfoot>
        </table>
    </section>
</body>
 
</html>

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

原文鏈接：https://blog.csdn.net/muguli2008/article/details/103787152

TML 表格實(shí)例:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

在線實(shí)例

表格

這個(gè)例子演示如何在 HTML 文檔中創(chuàng)建表格。

HTML 表格

表格由 <table> 標(biāo)簽來定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

表格實(shí)例

<tr>

</tr>

<tr>

</tr>

</table>

在瀏覽器顯示如下：:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

HTML 表格和邊框?qū)傩?/p>

如果不定義邊框?qū)傩?，表格將不顯示邊框。有時(shí)這很有用，但是大多數(shù)時(shí)候，我們希望顯示邊框。

使用邊框?qū)傩詠盹@示一個(gè)帶有邊框的表格：

<tr>

</tr>

</table>

HTML 表格表頭

表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。

大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本：

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

在瀏覽器顯示如下：

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

更多實(shí)例

沒有邊框的表格

本例演示一個(gè)沒有邊框的表格。

表格中的表頭(Heading)

本例演示如何顯示表格表頭。

帶有標(biāo)題的表格

本例演示一個(gè)帶標(biāo)題 (caption) 的表格

跨行或跨列的表格單元格

本例演示如何定義跨行或跨列的表格單元格。

表格內(nèi)的標(biāo)簽

本例演示如何顯示在不同的元素內(nèi)顯示元素。

單元格邊距(Cell padding)

本例演示如何使用 Cell padding 來創(chuàng)建單元格內(nèi)容與其邊框之間的空白。

單元格間距(Cell spacing)

本例演示如何使用 Cell spacing 增加單元格之間的距離。

HTML 表格標(biāo)簽

標(biāo)簽	描述
<table>	定義表格
<th>	定義表格的表頭
<tr>	定義表格的行
<td>	定義表格單元
<caption>	定義表格標(biāo)題
<colgroup>	定義表格列的組
<col>	定義用于表格列的屬性
<thead>	定義表格的頁(yè)眉
<tbody>	定義表格的主體
<tfoot>	定義表格的頁(yè)腳

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：JavaScript 設(shè)置和控制下拉菜單
下一篇：VUE 直接通過JS 修改html對(duì)象的值導(dǎo)致沒有更新到數(shù)據(jù)中解決方法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

html表格取消內(nèi)部豎線的五個(gè)步驟，實(shí)例在線

表格取消內(nèi)部豎線的五個(gè)步驟

表格取消內(nèi)部豎線實(shí)例代碼，及在線編輯器

完整實(shí)例代碼：

您的項(xiàng)目需求

表格取消內(nèi)部豎線實(shí)例代碼，及在線編輯器