Loading only some Bootstrap elements

Question

as the Title states, i would like to use Bootstrap for Web Development, however, only certain Elements of Bootstrap Framework - such as Tables.

Problem: when importing Bootstrap to Css, i also get their changes to h1,h2, paragraphs, body etc, etc...

How can i import only 1 thing which are Tables without the rest of changes to my Code/Tags?!

Answer 1

A responsive Bootstrap 4 table without the color themes

Use 1 of these classes: table-responsive-sm, table-responsive-md, table-responsive-lg, table-responsive-xl

<div class="table-responsive-md">
  <table>
    ...
  </table>
</div>

Use this css and add your own colors

table {
  width: 100%;
  margin-bottom: 1rem;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  border-spacing: 0;
  border-collapse: collapse;
}
thead, tbody, tr {
  width: 100%;
}
caption {
  padding: 0.75rem 0;
  text-align: left;
  caption-side: bottom;
}
th, td {
  box-sizing: border-box;
  padding: .25rem .375rem; /* whitespace around content */
  vertical-align: top;
  border-top: 1px solid #ccc;
  hyphens: auto;
  white-space: normal;
}
th {
  text-align: inherit;
  vertical-align: bottom;
  border-bottom: 1px solid #ccc;
}
@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

Optional css for printing a table

@media print {
  table { border-collapse: collapse !important; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  td, th { background-color: #fff !important; }
}