English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Tutorial di base

Bootstrap4 表格

HTML tabelle sono utilizzate per visualizzare i dati in modo griddato (ad esempio, righe e colonne). Utilizzando Bootstrap4, è possibile modificare rapidamente e semplicemente l'aspetto delle tabelle.

Bootstrap4 Tabelle di base

Bootstrap4 utilizza la classe .table per impostare lo stile delle tabelle di base, come nell'esempio seguente:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tabelle di base</h2>
　　<p>La classe .table è utilizzata per impostare lo stile delle tabelle di base:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
测试看看 ‹/›

Tavole a strisce

Aggiungendo .table-striped vedrete le strisce nelle <tbody> Le righe interne mostrano le strisce, come nel seguente esempio:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tavole a strisce</h2>
　　<p>Aggiungendo .table-striped è possibile impostare tabelle a strisce:</p>　　　　　　　　　　　　
　　<table class="table table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
测试看看 ‹/›

Tavole con bordi

.table-bordered può aggiungere bordi alla tabella

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tavole con bordi</h2>
　　<p>La classe .table-bordered può aggiungere bordi alla tabella:</p>　　　　　　　　　　　　
　　<table class="table table-bordered">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
</table>
</div>
</body>
</html>
测试看看 ‹/›

Tavole con hover

.table-hover può aggiungere l'effetto di hover a ogni riga della tabella (sfondo grigio):

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tavole con hover</h2>
　　<p>La classe .table-hover può aggiungere l'effetto di hover a ogni riga della tabella (sfondo grigio):</p>　　　　　　　　　　　　
　　<table class="table table-hover">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
测试看看 ‹/›

Tavole con sfondo nero

.table-dark può aggiungere uno sfondo nero alla tabella:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tavole con sfondo nero</h2>
　　<p>La classe .table-dark può aggiungere uno sfondo nero alla tabella:</p>　　　　　　　　　　　　
　　<table class="table table-dark">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
测试看看 ‹/›

Tavole a strisce nere

Utilizzando .table-dark e .table-striped è possibile creare tabelle a strisce nere:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tavole a strisce nere</h2>
　　<p>Utilizzando .table-dark e .table-striped è possibile creare tabelle a strisce nere:</p>　　　　　　　　　　　　
　　<table class="table table-dark table-striped">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
测试看看 ‹/›

Effetto di hover - Tavole nere

Utilizzando .table-dark e .table-hover è possibile impostare l'effetto di hover sugli elementi tabellari con sfondo nero:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　
鼠标悬停效果　-　黑色背景表格

　　<h2>Effetto hover - tabella con sfondo nero</h2>　　　　　　　　　　　　
　　<p>La combinazione delle classi .table-dark e .table-hover può impostare l'effetto di hover sullo sfondo nero delle tabelle:</p>
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
测试看看 ‹/›

<table class="table table-dark table-hover">

Classi di colore con significato

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　Specificando le classi di colore con significato, è possibile impostare i colori delle righe o delle celle delle tabelle:
　　<h2>Classi di colore con significato</h2>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<p>Specificando le classi di colore con significato, è possibile impostare i colori delle righe o delle celle delle tabelle:</p>
　　　　　　　　<td>Predefinito</td>
　　　　　　　　<td>Defaultson</td>
　　　　　　</tr>　　　　　　
　　　　　　<td>[email protected]</td>
　　　　　　　　<tr class="table-primary">
　　　　　　　　<td>Primario</td>
　　　　　　　　<td>Joe</td>
　　　　　　</tr>
　　　　　　<td>[email protected]</td>
　　　　　　　　<tr class="table-success">
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<td>Successo</td>
　　　　　　　　<tr class="table-danger">
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<td>Pericolo</td>
　　　　　　　　<tr class="table-info">
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-warning">
　　　　　　　　<td>Avviso</td>
　　　　　　　　<td>Refs</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-active">
　　　　　　　　<td>Attivo</td>
　　　　　　　　<td>Activeson</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-secondary">
　　　　　　　　<td>Secondario</td>
　　　　　　　　<td>Secondson</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-light">
　　　　　　　　<td>Chiaro</td>
　　　　　　　　<td>Angie</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr class="table-dark text-dark">
　　　　　　　　<td>Scuro</td>
　　　　　　　　<td>Bo</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
测试看看 ‹/›

La tabella sottostante elenca le spiegazioni delle classi di colore delle tabelle:

Nome della classedescrizione
.table-primaryBlu: indica che questa è un'operazione importante
.table-successVerde: indica che questa è un'operazione permessa
.table-dangerRosso: indica che questa è un'operazione potenzialmente pericolosa
.table-infoBlu chiaro: indica che il contenuto è cambiato
.table-warningArancione: indica un'operazione da notare
.table-activeGrigio: utilizzato per l'effetto di hover del mouse
.table-secondaryGrigio: indica che il contenuto non è molto importante
.table-lightGrigio chiaro, può essere lo sfondo della riga della tabella
.table-darkGrigio scuro, può essere lo sfondo della riga della tabella

Colori delle intestazioni

Nella versione Bootstrap v4.0.0-beta.2, .thead-dark è utilizzata per aggiungere un sfondo nero alle intestazioni della tabella, .thead-light per aggiungere un sfondo grigio:

Nella versione Bootstrap v4.0.0-beta, .thead-inverse è utilizzata per aggiungere un sfondo nero alle intestazioni della tabella, .thead-default per aggiungere un sfondo grigio.

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Colori delle intestazioni</h2>
　　<p>.thead-dark è utilizzata per aggiungere un sfondo nero alle intestazioni della tabella, .thead-light per aggiungere un sfondo grigio:</p>　　　　　　　　　　　　
　　<table class="table">
　　　　<thead class="thead-dark">
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　<table class="table">
　　　　<thead class="thead-light">
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
测试看看 ‹/›

Tabelle più piccole

.table-sm è utilizzata per impostare tabelle più piccole riducendo il margine interno:

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tabelle più piccole</h2>
　　<p>.table-sm è utilizzata per impostare tabelle più piccole riducendo il margine interno:</p>　　　　　　　　　　　　
　　<table class="table table-bordered table-sm">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Email</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>John</td>
　　　　　　　　<td>Doe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>Mary</td>
　　　　　　　　<td>Moe</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>July</td>
　　　　　　　　<td>Dooley</td>
　　　　　　　　<td>[email protected]</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
</div>
</body>
</html>
测试看看 ‹/›

Tabelle responsive

.table-responsive è utilizzata per creare tabelle responsive: quando la larghezza dello schermo è inferiore a 992px viene creato una barra di scorrimento orizzontale, se l'area visibile è maggiore di 992px viene visualizzato un effetto diverso (nessuna barra di scorrimento):

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tabelle responsive</h2>
　　<p>.table-responsive è usata per creare tabelle responsive: viene creata una barra di scorrimento orizzontale quando la larghezza dello schermo è inferiore a 992px, se la larghezza visibile è maggiore di 992px viene mostrato un effetto diverso (nessuna barra di scorrimento):</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="table-responsive">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>#</th>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Age</th>
　　　　　　　　<th>City</th>
　　　　　　　　<th>Country</th>
　　　　　　　　<th>Sex</th>
　　　　　　　　<th>Example</th>
　　　　　　　　<th>Example</th>
　　　　　　　　<th>Example</th>
　　　　　　　　<th>Example</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td>35</td>
　　　　　　　　<td>New York</td>
　　　　　　　　<td>USA</td>
　　　　　　　　<td>Female</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
测试看看 ‹/›

Puoi impostare le barre di scorrimento per determinate larghezze dello schermo come segue:

Nome della classeLarghezza dello schermo
.table-responsive-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px
<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Tabelle responsive</h2>
　　<p>.table-responsive-sm è usata per creare tabelle responsive, mostrando la barra di scorrimento orizzontale quando la larghezza dello schermo è inferiore a 576px.</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<p>Modifica la dimensione del browser per vedere l'effetto.</p>
　　<div class="table-responsive-sm">　　　　　　　　　　
　　<table class="table">
　　　　<thead>
　　　　　　<tr>
　　　　　　　　<th>#</th>
　　　　　　　　<th>Firstname</th>
　　　　　　　　<th>Lastname</th>
　　　　　　　　<th>Age</th>
　　　　　　　　<th>City</th>
　　　　　　　　<th>Country</th>
　　　　　　　　<th>Sex</th>
　　　　　　　　<th>Example</th>
　　　　　　　　<th>Example</th>
　　　　　　　　<th>Example</th>
　　　　　　　　<th>Example</th>
　　　　　　</tr>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>1</td>
　　　　　　　　<td>Anna</td>
　　　　　　　　<td>Pitt</td>
　　　　　　　　<td>35</td>
　　　　　　　　<td>New York</td>
　　　　　　　　<td>USA</td>
　　　　　　　　<td>Female</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　　　<td>Yes</td>
　　　　　　</tr>
　　　　</tbody>
　　</table>
　　</div>
</div>
</body>
</html>
测试看看 ‹/›
Bootstrap4 图像形状Bootstrap4 颜色