table-
bootstrap5.css
bootstrap5.css
.table {
--bs-table-bg: transparent;
--bs-table-striped-color: #212529;
--bs-table-striped-bg: rgba(0, 0, 0, 0.05);
--bs-table-active-color: #212529;
--bs-table-active-bg: rgba(0, 0, 0, 0.1);
--bs-table-hover-color: #212529;
--bs-table-hover-bg: rgba(0, 0, 0, 0.075);
width: 100%;
margin-bottom: 1rem;
color: #212529;
vertical-align: top;
border-color: #dee2e6;
}
bootstrap5.css
.table > :not(caption) > * > * {
padding: 0.5rem 0.5rem;
background-color: var(--bs-table-bg);
background-image: linear-gradient(var(--bs-table-accent-bg), var(--bs-table-accent-bg));
border-bottom-width: 1px;
}
bootstrap5.css
.table-sm > :not(caption) > * > * {
padding: 0.25rem 0.25rem;
}
bootstrap5.css
.table-bordered > :not(caption) > * {
border-width: 1px 0;
}
bootstrap5.css
.table-bordered > :not(caption) > * > * {
border-width: 0 1px;
}
bootstrap5.css
.table-borderless > :not(caption) > * > * {
border-bottom-width: 0;
}
bootstrap5.css
.table-striped > tbody > tr:nth-of-type(odd) {
--bs-table-accent-bg: var(--bs-table-striped-bg);
color: var(--bs-table-striped-color);
}
bootstrap5.css
.table-active {
--bs-table-accent-bg: var(--bs-table-active-bg);
color: var(--bs-table-active-color);
}
bootstrap5.css
.table-hover > tbody > tr:hover {
--bs-table-accent-bg: var(--bs-table-hover-bg);
color: var(--bs-table-hover-color);
}
bootstrap5.css
.table-primary {
--bs-table-bg: #cfe2ff;
--bs-table-striped-bg: #c5d7f2;
--bs-table-striped-color: #000;
--bs-table-active-bg: #bacbe6;
--bs-table-active-color: #000;
--bs-table-hover-bg: #bfd1ec;
--bs-table-hover-color: #000;
color: #000;
border-color: #bacbe6;
}
bootstrap5.css
.table-secondary {
--bs-table-bg: #e2e3e5;
--bs-table-striped-bg: #d7d8da;
--bs-table-striped-color: #000;
--bs-table-active-bg: #cbccce;
--bs-table-active-color: #000;
--bs-table-hover-bg: #d1d2d4;
--bs-table-hover-color: #000;
color: #000;
border-color: #cbccce;
}
bootstrap5.css
.table-success {
--bs-table-bg: #d1e7dd;
--bs-table-striped-bg: #c7dbd2;
--bs-table-striped-color: #000;
--bs-table-active-bg: #bcd0c7;
--bs-table-active-color: #000;
--bs-table-hover-bg: #c1d6cc;
--bs-table-hover-color: #000;
color: #000;
border-color: #bcd0c7;
}
bootstrap5.css
.table-info {
--bs-table-bg: #cff4fc;
--bs-table-striped-bg: #c5e8ef;
--bs-table-striped-color: #000;
--bs-table-active-bg: #badce3;
--bs-table-active-color: #000;
--bs-table-hover-bg: #bfe2e9;
--bs-table-hover-color: #000;
color: #000;
border-color: #badce3;
}
bootstrap5.css
.table-warning {
--bs-table-bg: #fff3cd;
--bs-table-striped-bg: #f2e7c3;
--bs-table-striped-color: #000;
--bs-table-active-bg: #e6dbb9;
--bs-table-active-color: #000;
--bs-table-hover-bg: #ece1be;
--bs-table-hover-color: #000;
color: #000;
border-color: #e6dbb9;
}
bootstrap5.css
.table-danger {
--bs-table-bg: #f8d7da;
--bs-table-striped-bg: #eccccf;
--bs-table-striped-color: #000;
--bs-table-active-bg: #dfc2c4;
--bs-table-active-color: #000;
--bs-table-hover-bg: #e5c7ca;
--bs-table-hover-color: #000;
color: #000;
border-color: #dfc2c4;
}
bootstrap5.css
.table-light {
--bs-table-bg: #f8f9fa;
--bs-table-striped-bg: #ecedee;
--bs-table-striped-color: #000;
--bs-table-active-bg: #dfe0e1;
--bs-table-active-color: #000;
--bs-table-hover-bg: #e5e6e7;
--bs-table-hover-color: #000;
color: #000;
border-color: #dfe0e1;
}
bootstrap5.css
.table-dark {
--bs-table-bg: #212529;
--bs-table-striped-bg: #2c3034;
--bs-table-striped-color: #fff;
--bs-table-active-bg: #373b3e;
--bs-table-active-color: #fff;
--bs-table-hover-bg: #323539;
--bs-table-hover-color: #fff;
color: #fff;
border-color: #373b3e;
}
bootstrap5.css
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
bootstrap5.css
@media (max-width: 575.98px) {
.table-responsive-sm {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
bootstrap5.css
@media (max-width: 767.98px) {
.table-responsive-md {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
bootstrap5.css
@media (max-width: 991.98px) {
.table-responsive-lg {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
bootstrap5.css
@media (max-width: 1199.98px) {
.table-responsive-xl {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
bootstrap5.css
@media (max-width: 1399.98px) {
.table-responsive-xxl {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
bootstrap5.css
.d-table-row {
display: table-row !important;
}
bootstrap5.css
.d-table-cell {
display: table-cell !important;
}
bootstrap5.css
@media (min-width: 576px) {
.float-sm-start {
float: left !important;
}
.float-sm-end {
float: right !important;
}
.float-sm-none {
float: none !important;
}
.d-sm-inline {
display: inline !important;
}
.d-sm-inline-block {
display: inline-block !important;
}
.d-sm-block {
display: block !important;
}
.d-sm-grid {
display: grid !important;
}
.d-sm-table {
display: table !important;
}
.d-sm-table-row {
display: table-row !important;
}
.d-sm-table-cell {
display: table-cell !important;
}
.d-sm-flex {
display: flex !important;
}
.d-sm-inline-flex {
display: inline-flex !important;
}
.d-sm-none {
display: none !important;
}
.flex-sm-fill {
flex: 1 1 auto !important;
}
.flex-sm-row {
flex-direction: row !important;
}
.flex-sm-column {
flex-direction: column !important;
}
.flex-sm-row-reverse {
flex-direction: row-reverse !important;
}
.flex-sm-column-reverse {
flex-direction: column-reverse !important;
}
.flex-sm-grow-0 {
flex-grow: 0 !important;
}
.flex-sm-grow-1 {
flex-grow: 1 !important;
}
.flex-sm-shrink-0 {
flex-shrink: 0 !important;
}
.flex-sm-shrink-1 {
flex-shrink: 1 !important;
}
.flex-sm-wrap {
flex-wrap: wrap !important;
}
.flex-sm-nowrap {
flex-wrap: nowrap !important;
}
.flex-sm-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.gap-sm-0 {
gap: 0 !important;
}
.gap-sm-1 {
gap: 0.25rem !important;
}
.gap-sm-2 {
gap: 0.5rem !important;
}
.gap-sm-3 {
gap: 1rem !important;
}
.gap-sm-4 {
gap: 1.5rem !important;
}
.gap-sm-5 {
gap: 3rem !important;
}
.justify-content-sm-start {
justify-content: flex-start !important;
}
.justify-content-sm-end {
justify-content: flex-end !important;
}
.justify-content-sm-center {
justify-content: center !important;
}
.justify-content-sm-between {
justify-content: space-between !important;
}
.justify-content-sm-around {
justify-content: space-around !important;
}
.justify-content-sm-evenly {
justify-content: space-evenly !important;
}
.align-items-sm-start {
align-items: flex-start !important;
}
.align-items-sm-end {
align-items: flex-end !important;
}
.align-items-sm-center {
align-items: center !important;
}
.align-items-sm-baseline {
align-items: baseline !important;
}
.align-items-sm-stretch {
align-items: stretch !important;
}
.align-content-sm-start {
align-content: flex-start !important;
}
.align-content-sm-end {
align-content: flex-end !important;
}
.align-content-sm-center {
align-content: center !important;
}
.align-content-sm-between {
align-content: space-between !important;
}
.align-content-sm-around {
align-content: space-around !important;
}
.align-content-sm-stretch {
align-content: stretch !important;
}
.align-self-sm-auto {
align-self: auto !important;
}
.align-self-sm-start {
align-self: flex-start !important;
}
.align-self-sm-end {
align-self: flex-end !important;
}
.align-self-sm-cent
bootstrap5.css
@media (min-width: 768px) {
.float-md-start {
float: left !important;
}
.float-md-end {
float: right !important;
}
.float-md-none {
float: none !important;
}
.d-md-inline {
display: inline !important;
}
.d-md-inline-block {
display: inline-block !important;
}
.d-md-block {
display: block !important;
}
.d-md-grid {
display: grid !important;
}
.d-md-table {
display: table !important;
}
.d-md-table-row {
display: table-row !important;
}
.d-md-table-cell {
display: table-cell !important;
}
.d-md-flex {
display: flex !important;
}
.d-md-inline-flex {
display: inline-flex !important;
}
.d-md-none {
display: none !important;
}
.flex-md-fill {
flex: 1 1 auto !important;
}
.flex-md-row {
flex-direction: row !important;
}
.flex-md-column {
flex-direction: column !important;
}
.flex-md-row-reverse {
flex-direction: row-reverse !important;
}
.flex-md-column-reverse {
flex-direction: column-reverse !important;
}
.flex-md-grow-0 {
flex-grow: 0 !important;
}
.flex-md-grow-1 {
flex-grow: 1 !important;
}
.flex-md-shrink-0 {
flex-shrink: 0 !important;
}
.flex-md-shrink-1 {
flex-shrink: 1 !important;
}
.flex-md-wrap {
flex-wrap: wrap !important;
}
.flex-md-nowrap {
flex-wrap: nowrap !important;
}
.flex-md-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.gap-md-0 {
gap: 0 !important;
}
.gap-md-1 {
gap: 0.25rem !important;
}
.gap-md-2 {
gap: 0.5rem !important;
}
.gap-md-3 {
gap: 1rem !important;
}
.gap-md-4 {
gap: 1.5rem !important;
}
.gap-md-5 {
gap: 3rem !important;
}
.justify-content-md-start {
justify-content: flex-start !important;
}
.justify-content-md-end {
justify-content: flex-end !important;
}
.justify-content-md-center {
justify-content: center !important;
}
.justify-content-md-between {
justify-content: space-between !important;
}
.justify-content-md-around {
justify-content: space-around !important;
}
.justify-content-md-evenly {
justify-content: space-evenly !important;
}
.align-items-md-start {
align-items: flex-start !important;
}
.align-items-md-end {
align-items: flex-end !important;
}
.align-items-md-center {
align-items: center !important;
}
.align-items-md-baseline {
align-items: baseline !important;
}
.align-items-md-stretch {
align-items: stretch !important;
}
.align-content-md-start {
align-content: flex-start !important;
}
.align-content-md-end {
align-content: flex-end !important;
}
.align-content-md-center {
align-content: center !important;
}
.align-content-md-between {
align-content: space-between !important;
}
.align-content-md-around {
align-content: space-around !important;
}
.align-content-md-stretch {
align-content: stretch !important;
}
.align-self-md-auto {
align-self: auto !important;
}
.align-self-md-start {
align-self: flex-start !important;
}
.align-self-md-end {
align-self: flex-end !important;
}
.align-self-md-cent
bootstrap5.css
@media (min-width: 992px) {
.float-lg-start {
float: left !important;
}
.float-lg-end {
float: right !important;
}
.float-lg-none {
float: none !important;
}
.d-lg-inline {
display: inline !important;
}
.d-lg-inline-block {
display: inline-block !important;
}
.d-lg-block {
display: block !important;
}
.d-lg-grid {
display: grid !important;
}
.d-lg-table {
display: table !important;
}
.d-lg-table-row {
display: table-row !important;
}
.d-lg-table-cell {
display: table-cell !important;
}
.d-lg-flex {
display: flex !important;
}
.d-lg-inline-flex {
display: inline-flex !important;
}
.d-lg-none {
display: none !important;
}
.flex-lg-fill {
flex: 1 1 auto !important;
}
.flex-lg-row {
flex-direction: row !important;
}
.flex-lg-column {
flex-direction: column !important;
}
.flex-lg-row-reverse {
flex-direction: row-reverse !important;
}
.flex-lg-column-reverse {
flex-direction: column-reverse !important;
}
.flex-lg-grow-0 {
flex-grow: 0 !important;
}
.flex-lg-grow-1 {
flex-grow: 1 !important;
}
.flex-lg-shrink-0 {
flex-shrink: 0 !important;
}
.flex-lg-shrink-1 {
flex-shrink: 1 !important;
}
.flex-lg-wrap {
flex-wrap: wrap !important;
}
.flex-lg-nowrap {
flex-wrap: nowrap !important;
}
.flex-lg-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.gap-lg-0 {
gap: 0 !important;
}
.gap-lg-1 {
gap: 0.25rem !important;
}
.gap-lg-2 {
gap: 0.5rem !important;
}
.gap-lg-3 {
gap: 1rem !important;
}
.gap-lg-4 {
gap: 1.5rem !important;
}
.gap-lg-5 {
gap: 3rem !important;
}
.justify-content-lg-start {
justify-content: flex-start !important;
}
.justify-content-lg-end {
justify-content: flex-end !important;
}
.justify-content-lg-center {
justify-content: center !important;
}
.justify-content-lg-between {
justify-content: space-between !important;
}
.justify-content-lg-around {
justify-content: space-around !important;
}
.justify-content-lg-evenly {
justify-content: space-evenly !important;
}
.align-items-lg-start {
align-items: flex-start !important;
}
.align-items-lg-end {
align-items: flex-end !important;
}
.align-items-lg-center {
align-items: center !important;
}
.align-items-lg-baseline {
align-items: baseline !important;
}
.align-items-lg-stretch {
align-items: stretch !important;
}
.align-content-lg-start {
align-content: flex-start !important;
}
.align-content-lg-end {
align-content: flex-end !important;
}
.align-content-lg-center {
align-content: center !important;
}
.align-content-lg-between {
align-content: space-between !important;
}
.align-content-lg-around {
align-content: space-around !important;
}
.align-content-lg-stretch {
align-content: stretch !important;
}
.align-self-lg-auto {
align-self: auto !important;
}
.align-self-lg-start {
align-self: flex-start !important;
}
.align-self-lg-end {
align-self: flex-end !important;
}
.align-self-lg-cent
bootstrap5.css
@media (min-width: 1200px) {
.float-xl-start {
float: left !important;
}
.float-xl-end {
float: right !important;
}
.float-xl-none {
float: none !important;
}
.d-xl-inline {
display: inline !important;
}
.d-xl-inline-block {
display: inline-block !important;
}
.d-xl-block {
display: block !important;
}
.d-xl-grid {
display: grid !important;
}
.d-xl-table {
display: table !important;
}
.d-xl-table-row {
display: table-row !important;
}
.d-xl-table-cell {
display: table-cell !important;
}
.d-xl-flex {
display: flex !important;
}
.d-xl-inline-flex {
display: inline-flex !important;
}
.d-xl-none {
display: none !important;
}
.flex-xl-fill {
flex: 1 1 auto !important;
}
.flex-xl-row {
flex-direction: row !important;
}
.flex-xl-column {
flex-direction: column !important;
}
.flex-xl-row-reverse {
flex-direction: row-reverse !important;
}
.flex-xl-column-reverse {
flex-direction: column-reverse !important;
}
.flex-xl-grow-0 {
flex-grow: 0 !important;
}
.flex-xl-grow-1 {
flex-grow: 1 !important;
}
.flex-xl-shrink-0 {
flex-shrink: 0 !important;
}
.flex-xl-shrink-1 {
flex-shrink: 1 !important;
}
.flex-xl-wrap {
flex-wrap: wrap !important;
}
.flex-xl-nowrap {
flex-wrap: nowrap !important;
}
.flex-xl-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.gap-xl-0 {
gap: 0 !important;
}
.gap-xl-1 {
gap: 0.25rem !important;
}
.gap-xl-2 {
gap: 0.5rem !important;
}
.gap-xl-3 {
gap: 1rem !important;
}
.gap-xl-4 {
gap: 1.5rem !important;
}
.gap-xl-5 {
gap: 3rem !important;
}
.justify-content-xl-start {
justify-content: flex-start !important;
}
.justify-content-xl-end {
justify-content: flex-end !important;
}
.justify-content-xl-center {
justify-content: center !important;
}
.justify-content-xl-between {
justify-content: space-between !important;
}
.justify-content-xl-around {
justify-content: space-around !important;
}
.justify-content-xl-evenly {
justify-content: space-evenly !important;
}
.align-items-xl-start {
align-items: flex-start !important;
}
.align-items-xl-end {
align-items: flex-end !important;
}
.align-items-xl-center {
align-items: center !important;
}
.align-items-xl-baseline {
align-items: baseline !important;
}
.align-items-xl-stretch {
align-items: stretch !important;
}
.align-content-xl-start {
align-content: flex-start !important;
}
.align-content-xl-end {
align-content: flex-end !important;
}
.align-content-xl-center {
align-content: center !important;
}
.align-content-xl-between {
align-content: space-between !important;
}
.align-content-xl-around {
align-content: space-around !important;
}
.align-content-xl-stretch {
align-content: stretch !important;
}
.align-self-xl-auto {
align-self: auto !important;
}
.align-self-xl-start {
align-self: flex-start !important;
}
.align-self-xl-end {
align-self: flex-end !important;
}
.align-self-xl-cen
bootstrap5.css
@media (min-width: 1400px) {
.float-xxl-start {
float: left !important;
}
.float-xxl-end {
float: right !important;
}
.float-xxl-none {
float: none !important;
}
.d-xxl-inline {
display: inline !important;
}
.d-xxl-inline-block {
display: inline-block !important;
}
.d-xxl-block {
display: block !important;
}
.d-xxl-grid {
display: grid !important;
}
.d-xxl-table {
display: table !important;
}
.d-xxl-table-row {
display: table-row !important;
}
.d-xxl-table-cell {
display: table-cell !important;
}
.d-xxl-flex {
display: flex !important;
}
.d-xxl-inline-flex {
display: inline-flex !important;
}
.d-xxl-none {
display: none !important;
}
.flex-xxl-fill {
flex: 1 1 auto !important;
}
.flex-xxl-row {
flex-direction: row !important;
}
.flex-xxl-column {
flex-direction: column !important;
}
.flex-xxl-row-reverse {
flex-direction: row-reverse !important;
}
.flex-xxl-column-reverse {
flex-direction: column-reverse !important;
}
.flex-xxl-grow-0 {
flex-grow: 0 !important;
}
.flex-xxl-grow-1 {
flex-grow: 1 !important;
}
.flex-xxl-shrink-0 {
flex-shrink: 0 !important;
}
.flex-xxl-shrink-1 {
flex-shrink: 1 !important;
}
.flex-xxl-wrap {
flex-wrap: wrap !important;
}
.flex-xxl-nowrap {
flex-wrap: nowrap !important;
}
.flex-xxl-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.gap-xxl-0 {
gap: 0 !important;
}
.gap-xxl-1 {
gap: 0.25rem !important;
}
.gap-xxl-2 {
gap: 0.5rem !important;
}
.gap-xxl-3 {
gap: 1rem !important;
}
.gap-xxl-4 {
gap: 1.5rem !important;
}
.gap-xxl-5 {
gap: 3rem !important;
}
.justify-content-xxl-start {
justify-content: flex-start !important;
}
.justify-content-xxl-end {
justify-content: flex-end !important;
}
.justify-content-xxl-center {
justify-content: center !important;
}
.justify-content-xxl-between {
justify-content: space-between !important;
}
.justify-content-xxl-around {
justify-content: space-around !important;
}
.justify-content-xxl-evenly {
justify-content: space-evenly !important;
}
.align-items-xxl-start {
align-items: flex-start !important;
}
.align-items-xxl-end {
align-items: flex-end !important;
}
.align-items-xxl-center {
align-items: center !important;
}
.align-items-xxl-baseline {
align-items: baseline !important;
}
.align-items-xxl-stretch {
align-items: stretch !important;
}
.align-content-xxl-start {
align-content: flex-start !important;
}
.align-content-xxl-end {
align-content: flex-end !important;
}
.align-content-xxl-center {
align-content: center !important;
}
.align-content-xxl-between {
align-content: space-between !important;
}
.align-content-xxl-around {
align-content: space-around !important;
}
.align-content-xxl-stretch {
align-content: stretch !important;
}
.align-self-xxl-auto {
align-self: auto !important;
}
.align-self-xxl-start {
align-self: flex-start !important;
}
.align-self-xxl-end {
align-
bootstrap5.css
@media print {
/* 印刷字に利用するCSS mediaで大きく括って、それぞれのタグの設定をする */
.d-print-inline {
display: inline !important;
}
.d-print-inline-block {
display: inline-block !important;
}
.d-print-block {
display: block !important;
}
.d-print-grid {
display: grid !important;
}
.d-print-table {
display: table !important;
}
.d-print-table-row {
display: table-row !important;
}
.d-print-table-cell {
display: table-cell !important;
}
.d-print-flex {
display: flex !important;
}
.d-print-inline-flex {
display: inline-flex !important;
}
.d-print-none {
display: none !important;
}
}
html bootstrap5 Sample
罫線付きテーブル:table-bordered
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>タイトル</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>タイトル</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
罫線色つきテーブル:table-borderedとborder-primary
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
<table class="table table-bordered border-primary">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
罫線無しテーブル:table-borderless
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
背景色用のクラス:bg-*
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
なし(標準) | データ | データ | データ |
bg-primary | データ | データ | データ |
bg-success | データ | データ | データ |
bg-warning | データ | データ | データ |
bg-danger | データ | データ | データ |
bg-info | データ | データ | データ |
<table class="table bg-warning text-dark">table-dark">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>なし(標準)</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-primary">
<td>bg-primary</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-success">
<td>bg-success</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-warning">
<td>bg-warning</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-danger">
<td>bg-danger</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="bg-info">
<td>bg-info</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
テーブル trの背景色:table-*
背景色用のクラス | タイトル | タイトル | タイトル |
---|---|---|---|
なし(標準) | データ | データ | データ |
table-active | データ | データ | データ |
table-primary | データ | データ | データ |
table-secondary | データ | データ | データ |
table-success | データ | データ | データ |
table-danger | データ | データ | データ |
table-warning | データ | データ | データ |
table-info | データ | データ | データ |
table-light | データ | データ | データ |
table-dark | データ | データ | データ |
<table class="table">
<!-- bgによる背景色とtable-*の背景色の違い -->
<!-- セル単位で背景色を変えることで、表の行やセルを強調表示する -->
<thead>
<tr>
<th scope="col">背景色用のクラス</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>なし(標準)</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-active">
<td>table-active</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-primary">
<td>table-primary</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-secondary">
<td>table-secondary</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-success">
<td>table-success</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-danger">
<td>table-danger</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-warning">
<td>table-warning</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-info">
<td>table-info</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-light">
<td>table-light</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr class="table-dark">
<td>table-dark</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
テーブルの色の反転:table-dark
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
テーブル行のマウスオーバー:table-hover
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
<table class="table table-hover">
<!-- hoverは、マウスを載せると、背景色が変わる -->
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
縞模様のテーブル:table-striped
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
背景色あり縞模様のテーブル:table-successとtable-striped
タイトル | タイトル | タイトル | タイトル |
---|---|---|---|
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
タイトル | データ | データ | データ |
<table class="table table-success table-striped">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
コンパクトテーブル:table-sm
タイトル | タイトル | タイトル | タイトル | タイトル | タイトル |
---|---|---|---|---|---|
タイトル | データ | データ | データ | データ | データ |
タイトル | データ | データ | データ | データ | データ |
タイトル | データ | データ | データ | データ | データ |
<table class="table table-sm">
<!-- table-sm を追加するとセルの padding を半分にできます コンパクト表示になる-->
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<th scope="row">タイトル</th>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
レスポンシブテーブル:table-responsive
タイトル | タイトル | タイトル | タイトル | タイトル |
---|---|---|---|---|
データ | データ | データ | データ | データ |
<!-- tableタグに設定するのではなく、divで囲む -->
<!-- .table を .table-responsive でラップしてしまうという考え方 -->
<!-- table-responsiveすることで、デバイスの条件により水平スクロールが自動で表示される -->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
</div>
レスポンシブテーブルsm未満:table-responsive-sm
タイトル | タイトル | タイトル | タイトル | タイトル |
---|---|---|---|---|
データ | データ | データ | データ | データ |
データ | データ | データ | データ | データ |
<!-- レスポンシブテーブルの最大ブレークポイントを指定します -->
<!-- smまではスクロールなしで、それ以上は、スクロール表示 -->
<!-- そのブレークポイント以降では、テーブルは正常に動作し、水平方向にはスクロールしない -->
<!-- bootstrap5:table-responsive-sm、md、-lg、-xl、-xxl -->
<div class="table-responsive-sm mb-5">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
</div>
レスポンシブテーブルmd:table-responsive-md
タイトル | タイトル | タイトル | タイトル | タイトル |
---|---|---|---|---|
データ | データ | データ | データ | データ |
<div class="table-responsive-md mb-5">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
</div>
レスポンシブテーブルlg:table-responsive-lg
タイトル | タイトル | タイトル | タイトル | タイトル |
---|---|---|---|---|
データ | データ | データ | データ | データ |
<div class="table-responsive-lg mb-5">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
</div>
レスポンシブテーブルxl:table-responsive-xl
タイトル | タイトル | タイトル | タイトル | タイトル |
---|---|---|---|---|
データ | データ | データ | データ | データ |
<div class="table-responsive-xl mb-5">
<table class="table">
<thead>
<tr>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
<th scope="col">タイトル</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
<td>データ</td>
</tr>
</tbody>
</table>
</div>