国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<style id="gsbla"></style>

<samp id="gsbla"><legend id="gsbla"></legend></samp>

<style id="gsbla"></style>

<style id="gsbla"><strike id="gsbla"></strike></style>

Bootstrap——表格（基本實(shí)例、表頭選項(xiàng)、條紋狀表格、帶邊框的表格、無(wú)邊框的表格、鼠標(biāo)指針懸停、緊湊表格、狀態(tài)類、響應(yīng)式表格）

2年前作者：我是一顆好李子分類：Toy博客閱讀(23)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了Bootstrap——表格（基本實(shí)例、表頭選項(xiàng)、條紋狀表格、帶邊框的表格、無(wú)邊框的表格、鼠標(biāo)指針懸停、緊湊表格、狀態(tài)類、響應(yīng)式表格）。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

? ? ? ?在網(wǎng)頁(yè)制作中，通常會(huì)用到表格的鼠標(biāo)懸停、隔行變色等功能。Bootstrap中提供了一系列表格布局樣式，利用該樣式可以幫助開(kāi)發(fā)者快速開(kāi)發(fā)出美觀的表格，作用于<table>元素的表格樣式如下表所示。

bootstrap表格,Bootstrap,bootstrap,前端,html

上表中，.table是表格的一個(gè)基類，如果想要加其他的樣式，都要在.table的基礎(chǔ)上去添加。表內(nèi)的樣式可以組合使用，多個(gè)樣式之間只需使用空格隔開(kāi)即可，并且都支持.table-dark樣式，適用于反轉(zhuǎn)色調(diào)。

Bootstrap對(duì)表格進(jìn)行了優(yōu)化，通過(guò)給<table>元素應(yīng)用.table類樣式便可以得到一個(gè)優(yōu)化的基本的表
格。

1.基本實(shí)例
例:給<table>添加.table類樣式，顯示優(yōu)化后的表格。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table">
				<thead>
					<tr>
						<th scope="col">序號(hào)</th>
						<th scope="col">學(xué)號(hào)</th>
						<th scope="col">姓名</th>
						<th scope="col">專業(yè)</th>
						<th scope="col">課程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>張雷</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

結(jié)果圖：

bootstrap表格,Bootstrap,bootstrap,前端,html
?

2.表頭選項(xiàng)

?例:給表頭<thead>添加.thead-light類樣式示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table">
				<thead class="thead-light">
					<tr>
						<th scope="col">序號(hào)</th>
						<th scope="col">學(xué)號(hào)</th>
						<th scope="col">姓名</th>
						<th scope="col">專業(yè)</th>
						<th scope="col">課程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>張雷</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

?結(jié)果圖：

bootstrap表格,Bootstrap,bootstrap,前端,html

3.條紋狀表格

例:給<table>添加.table-striped類樣式示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table table-striped">
				<thead>
					<tr>
						<th scope="col">序號(hào)</th>
						<th scope="col">學(xué)號(hào)</th>
						<th scope="col">姓名</th>
						<th scope="col">專業(yè)</th>
						<th scope="col">課程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>張雷</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

結(jié)果圖：

bootstrap表格,Bootstrap,bootstrap,前端,html
?

4.帶邊框的表格

例：給<table>元素添加.table-bordered類樣式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th scope="col">序號(hào)</th>
						<th scope="col">學(xué)號(hào)</th>
						<th scope="col">姓名</th>
						<th scope="col">專業(yè)</th>
						<th scope="col">課程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>張雷</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

?結(jié)果圖：

bootstrap表格,Bootstrap,bootstrap,前端,html

5.無(wú)邊框的表格

例：給<table>元素添加.table-boardeless類樣式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table table-borderless">
				<thead>
					<tr>
						<th scope="col">序號(hào)</th>
						<th scope="col">學(xué)號(hào)</th>
						<th scope="col">姓名</th>
						<th scope="col">專業(yè)</th>
						<th scope="col">課程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>張雷</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

?結(jié)果圖：

bootstrap表格,Bootstrap,bootstrap,前端,html

?6.鼠標(biāo)指針懸停

例：給<table>元素添加.table-hover類樣式示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table table-hover">
				<thead>
					<tr>
						<th scope="col">序號(hào)</th>
						<th scope="col">學(xué)號(hào)</th>
						<th scope="col">姓名</th>
						<th scope="col">專業(yè)</th>
						<th scope="col">課程</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>張雷</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

結(jié)果圖：

bootstrap表格,Bootstrap,bootstrap,前端,html

7.緊湊表格

例：給<table>元素添加.table-sm類樣式。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <table class="table table-sm">
            <thead>
                <tr>
                    <th scope="col">序號(hào)</th>
                    <th scope="col">學(xué)號(hào)</th>
                    <th scope="col">姓名</th>
                    <th scope="col">專業(yè)</th>
                    <th scope="col">課程</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>21090401001</td>
                    <td>李莉</td>
                    <td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
                    <td>操作系統(tǒng)</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>21090401002</td>
                    <td>張雷</td>
                    <td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
                    <td>操作系統(tǒng)</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>21090401003</td>
                    <td>周冰</td>
                    <td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
                    <td>操作系統(tǒng)</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

?結(jié)果圖：

bootstrap表格,Bootstrap,bootstrap,前端,html

8.狀態(tài)類

? ? ? ?Bootstrap為表格提供了多種狀態(tài)的樣式類，這些狀態(tài)類的主要作用是為表格中的行或單元格設(shè)置不同的背景顏色。
? ? ? ?狀態(tài)類設(shè)置的是<tr>、<td>或<th>元素樣式，使用.table-*來(lái)設(shè)置，可選值包括success、active、primary、secondary、danger、warning、info、light、dark等，同時(shí)狀態(tài)類也適用于反轉(zhuǎn)色調(diào)。

例：表格背景顏色示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<table class="table">
				<thead>
					<tr>
						<th scope="col">序號(hào)</th>
						<th scope="col">學(xué)號(hào)</th>
						<th scope="col">姓名</th>
						<th scope="col">專業(yè)</th>
						<th scope="col">課程</th>
					</tr>
				</thead>
				<tbody>
					<tr class="table-success">
						<th scope="row">1</th>
						<td>21090401001</td>
						<td>李莉</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr class="table-active">
						<th scope="row">2</th>
						<td>21090401002</td>
						<td>張雷</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr class="table-primary">
						<th scope="row">3</th>
						<td>21090401003</td>
						<td>周冰</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr class="table-warning">
						<th scope="row">4</th>
						<td>21090401004</td>
						<td>王穗</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr class="table-danger">
						<th scope="row">5</th>
						<td>21090401005</td>
						<td>周利</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr class="table-info">
						<th scope="row">6</th>
						<td>21090401006</td>
						<td>何琪</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					<tr class="table-secondary">
						<th scope="row">7</th>
						<td>21090401007</td>
						<td>付偉</td>
						<td>計(jì)算機(jī)科學(xué)與技術(shù)</td>
						<td>操作系統(tǒng)</td>
					</tr>
					
				</tbody>
			</table>
		</div>
	</body>
</html>

結(jié)果圖：

bootstrap表格,Bootstrap,bootstrap,前端,html
?9.響應(yīng)式表格

? ? ? ?通過(guò)把任意的table包裝在.table-responsive類內(nèi)，可以創(chuàng)建響應(yīng)式表格。即當(dāng)表格水平溢出時(shí)出現(xiàn)水平滾動(dòng)條。

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="table-responsive">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>序號(hào)</th>
						<th>姓名</th>
						<th>班級(jí)</th>
						<th>語(yǔ)文</th>
						<th>數(shù)學(xué)</th>
						<th>英語(yǔ)</th>
						<th>物理</th>
						<th>化學(xué)</th>
						<th>生物</th>
						<th>地理</th>
						<th>政治</th>
						<th>歷史</th>
					</tr>
					<tbody>
						<tr>
							<th>1</th>
							<th>張三</th>
							<th>3班</th>
							<th>80</th>
							<th>90</th>
							<th>92</th>
							<th>85</th>
							<th>92</th>
							<th>80</th>
							<th>85</th>
							<th>90</th>
							<th>85</th>
						</tr>
					</tbody>
				</thead>
			</table>
		</div>
	</body>
</html>

?結(jié)果圖：

小屏幕效果：

bootstrap表格,Bootstrap,bootstrap,前端,html

大屏幕效果：

bootstrap表格,Bootstrap,bootstrap,前端,html 文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-667201.html

到了這里，關(guān)于Bootstrap——表格（基本實(shí)例、表頭選項(xiàng)、條紋狀表格、帶邊框的表格、無(wú)邊框的表格、鼠標(biāo)指針懸停、緊湊表格、狀態(tài)類、響應(yīng)式表格）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

vue3 + Ant Design 實(shí)現(xiàn)雙表頭表格（橫向表頭+縱向表頭）
?一、要實(shí)現(xiàn)的效果（縱向固定表頭的表格，橫向表頭數(shù)量動(dòng)態(tài)化）二、這是后臺(tái)返回的數(shù)據(jù)格式（以企業(yè)為數(shù)組，每個(gè)企業(yè)里有個(gè)站點(diǎn)數(shù)組pointFactors） ? 三、代碼實(shí)現(xiàn)步驟 ? （1）定義縱向固定表頭（2）動(dòng)態(tài)生成橫向表頭（從接口獲取數(shù)據(jù) ） ? （3）循環(huán)原始數(shù)據(jù)，生
2024年02月04日
瀏覽(48)
WPF多表頭表格實(shí)現(xiàn)
前言多表頭表格是一個(gè)常見(jiàn)的業(yè)務(wù)需求，然而WPF中卻沒(méi)有默認(rèn)實(shí)現(xiàn)這個(gè)功能，得益于WPF強(qiáng)大的控件模板設(shè)計(jì)，我們可以通過(guò)修改控件模板的方式自己實(shí)現(xiàn)它。一、需求分析 ?? 下圖為一個(gè)典型的統(tǒng)計(jì)表格，統(tǒng)計(jì)1-12月的數(shù)據(jù)。 ? ? ? 此時(shí)我們有一個(gè)需求，需要將月份按季度劃
2024年04月22日
瀏覽(21)
Vue+el-table 修改表格單元格橫線邊框顏色及表格空數(shù)據(jù)時(shí)邊框顏色
找到對(duì)應(yīng)的css樣式進(jìn)行修改
2024年04月11日
瀏覽(29)
Winform中DatagridView 表頭實(shí)現(xiàn)一個(gè)加上一個(gè)checkBox，實(shí)現(xiàn)全選選項(xiàng)功能
點(diǎn)擊checkBox1或者直接在第一列列表頭點(diǎn)擊即可實(shí)現(xiàn) 我的datagridview叫dgv 我在datagridview已經(jīng)默認(rèn)添加了一個(gè)DataGridViewCheckBoxColumn ，勾選時(shí)value為1，不勾選時(shí)value為0 拖動(dòng)組件，然后綁定事件點(diǎn)擊事件事件代碼：這種需要自己弄一個(gè)DataGridViewCheckBoxColumn 文件位置詳細(xì)代碼： ==D
2024年02月13日
瀏覽(24)
Vue+Element-ui實(shí)現(xiàn)表格嵌套表格（表頭不同）
data中integrateList根據(jù)后端返回的json數(shù)據(jù)確定，其格式為：
2024年02月14日
瀏覽(37)
【JSON渲染工具】Element UI動(dòng)態(tài)生成表格，多行表頭，自定義表頭合并
table ：中每個(gè)對(duì)象代表一張表格； table_header ：表示表格表頭數(shù)據(jù)； headerColor ：表示表格表頭背景顏色； headerData ：表示表格表頭內(nèi)容數(shù)據(jù)； prop ：值為與 table_content 中對(duì)象屬性對(duì)應(yīng),data_list中的avgMen對(duì)應(yīng)的prop需為\\\"first.avgMen\\\"(這里跟獲取對(duì)象的點(diǎn)語(yǔ)法相似)，如以下例子 label
2024年04月10日
瀏覽(34)
自定義表格的表頭根據(jù)后端的數(shù)據(jù)進(jìn)行篩選是否進(jìn)行自定義表頭添加按鈕
自定義表格的表頭根據(jù)后端的數(shù)據(jù)進(jìn)行篩選是否進(jìn)行自定義表頭添加按鈕注意：表頭插槽拿到的column 和內(nèi)容插槽拿到的內(nèi)容不一致，header插槽的label對(duì)應(yīng)el-table-column的label，prop對(duì)應(yīng)header插槽的property 效果：
2024年02月06日
瀏覽(27)
elementui表格實(shí)現(xiàn)頂部和左側(cè)雙表頭
先上效果圖 ?左邊第一列的表頭是咱們前端根據(jù)需要自定義的，常用于需要數(shù)據(jù)對(duì)比的場(chǎng)景。后端返回的數(shù)據(jù)如下，就是常用的表格格式(這里是每個(gè)產(chǎn)品數(shù)據(jù)都是單獨(dú)的接口調(diào)用的，前端做個(gè)聚合就好，dataList = [data1, data2] )： ?我們先自定義左邊一列，這里的key是根據(jù)后端
2024年02月15日
瀏覽(21)
HTML--CSS--邊框、列表、表格樣式
屬性： border-width 邊框?qū)挾?border-style 邊框外觀 border-color 邊框顏色需要同時(shí)設(shè)定三個(gè)屬性取值為像素值 none 無(wú)樣式 dashed 虛線 solid 實(shí)線如示例：為 div 設(shè)定了一個(gè)邊框，虛線，寬度10像素，顏色是紅色效果：另一寫法：簡(jiǎn)寫,將配置都寫進(jìn) border里，效果是一樣的 border-top
2024年01月17日
瀏覽(24)
微信小程序 table表格固定表頭和首列右側(cè)表格可以左右滾動(dòng)（多種表格演練）
最近在做公司的項(xiàng)目需要到表格展示數(shù)據(jù)，但是微信小程序是沒(méi)有原生table標(biāo)簽的，于是就百度各種搜...發(fā)現(xiàn)結(jié)構(gòu)有類似的就粘過(guò)來(lái)修改，要善于學(xué)習(xí)和借鑒別人的經(jīng)驗(yàn)使其變成為自己的東西，學(xué)無(wú)止境~ 在這里做下記錄！ 1.左側(cè)一列固定不動(dòng) 2.右側(cè)表格內(nèi)容可以左右滾動(dòng) 3
2024年02月09日
瀏覽(465)

<style id="xgtwh"><legend id="xgtwh"></legend></style>