# Making a responsive table using CSS

**URL:** <https://community.hubspot.com/t/making-a-responsive-table-using-css/20711>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [May 8, 2020, 3:26pm UTC](https://community.hubspot.com/t/making-a-responsive-table-using-css/20711 "2020-05-08T15:26:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![white12](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/white12/32/84335_2.png) [@white12](https://community.hubspot.com/u/white12)\
**Post date:** [May 8, 2020, 3:26pm UTC](https://community.hubspot.com/t/making-a-responsive-table-using-css/20711/1 "2020-05-08T15:26:27Z")

</div>

Hi all,

I have a data table on my page, on desktop its looks fine but on mobile, it looks very bad. So I want to make it responsive using CSS.

Anyone please suggest how to do it?

Thanks.

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [May 8, 2020, 3:32pm UTC](https://community.hubspot.com/t/making-a-responsive-table-using-css/20711/2 "2020-05-08T15:32:32Z")

</div>

Hey @white12

Here are a few resources you can use to get you going:

[https://www.w3schools.com/howto/howto\_css\_table\_responsive.asp](https://www.w3schools.com/howto/howto_css_table_responsive.asp)

> **[Responsive Data Tables | CSS-Tricks](https://css-tricks.com/responsive-data-tables/)**
>
> Tables of data can only squish horizontally so far, so they can be a pain to browse on small screens (like mobile devices) where you may need to scroll both horizontally and vertically to browse the information at readable text sizes. We'll explore a...

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [May 9, 2020, 8:37pm UTC](https://community.hubspot.com/t/making-a-responsive-table-using-css/20711/3 "2020-05-09T20:37:08Z")

</div>

Hi @white12,

here’s the complete table part of bootstrap4.

You can create a new css file paste the code into it and link the file to the desired module/template. Or you can paste it at the very bottom of your main css file(not recomended).

After you’ve got the css running you can [look here](https://getbootstrap.com/docs/4.4/content/tables/) how to apply it.

The code:

```auto
.table {
 width: 100%;
 margin-bottom: 1rem;
 color: #212529;
}

.table th,
.table td {
 padding: 0.75rem;
 vertical-align: top;
 border-top: 1px solid #dee2e6;
}

.table thead th {
 vertical-align: bottom;
 border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
 border-top: 2px solid #dee2e6;
}

.table-sm th,
.table-sm td {
 padding: 0.3rem;
}

.table-bordered {
 border: 1px solid #dee2e6;
}

.table-bordered th,
.table-bordered td {
 border: 1px solid #dee2e6;
}

.table-bordered thead th,
.table-bordered thead td {
 border-bottom-width: 2px;
}

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
 border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
 background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
 color: #212529;
 background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary > th,
.table-primary > td {
 background-color: #b8daff;
}

.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
 border-color: #7abaff;
}

.table-hover .table-primary:hover {
 background-color: #9fcdff;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
 background-color: #9fcdff;
}

.table-secondary,
.table-secondary > th,
.table-secondary > td {
 background-color: #d6d8db;
}

.table-secondary th,
.table-secondary td,
.table-secondary thead th,
.table-secondary tbody + tbody {
 border-color: #b3b7bb;
}

.table-hover .table-secondary:hover {
 background-color: #c8cbcf;
}

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
 background-color: #c8cbcf;
}

.table-success,
.table-success > th,
.table-success > td {
 background-color: #c3e6cb;
}

.table-success th,
.table-success td,
.table-success thead th,
.table-success tbody + tbody {
 border-color: #8fd19e;
}

.table-hover .table-success:hover {
 background-color: #b1dfbb;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
 background-color: #b1dfbb;
}

.table-info,
.table-info > th,
.table-info > td {
 background-color: #bee5eb;
}

.table-info th,
.table-info td,
.table-info thead th,
.table-info tbody + tbody {
 border-color: #86cfda;
}

.table-hover .table-info:hover {
 background-color: #abdde5;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
 background-color: #abdde5;
}

.table-warning,
.table-warning > th,
.table-warning > td {
 background-color: #ffeeba;
}

.table-warning th,
.table-warning td,
.table-warning thead th,
.table-warning tbody + tbody {
 border-color: #ffdf7e;
}

.table-hover .table-warning:hover {
 background-color: #ffe8a1;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
 background-color: #ffe8a1;
}

.table-danger,
.table-danger > th,
.table-danger > td {
 background-color: #f5c6cb;
}

.table-danger th,
.table-danger td,
.table-danger thead th,
.table-danger tbody + tbody {
 border-color: #ed969e;
}

.table-hover .table-danger:hover {
 background-color: #f1b0b7;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
 background-color: #f1b0b7;
}

.table-light,
.table-light > th,
.table-light > td {
 background-color: #fdfdfe;
}

.table-light th,
.table-light td,
.table-light thead th,
.table-light tbody + tbody {
 border-color: #fbfcfc;
}

.table-hover .table-light:hover {
 background-color: #ececf6;
}

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
 background-color: #ececf6;
}

.table-dark,
.table-dark > th,
.table-dark > td {
 background-color: #c6c8ca;
}

.table-dark th,
.table-dark td,
.table-dark thead th,
.table-dark tbody + tbody {
 border-color: #95999c;
}

.table-hover .table-dark:hover {
 background-color: #b9bbbe;
}

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
 background-color: #b9bbbe;
}

.table-active,
.table-active > th,
.table-active > td {
 background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
 background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
 background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
 color: #fff;
 background-color: #343a40;
 border-color: #454d55;
}

.table .thead-light th {
 color: #495057;
 background-color: #e9ecef;
 border-color: #dee2e6;
}

.table-dark {
 color: #fff;
 background-color: #343a40;
}

.table-dark th,
.table-dark td,
.table-dark thead th {
 border-color: #454d55;
}

.table-dark.table-bordered {
 border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
 background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
 color: #fff;
 background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
 .table-responsive-sm {
 display: block;
 width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 }
 .table-responsive-sm > .table-bordered {
 border: 0;
 }
}

@media (max-width: 767.98px) {
 .table-responsive-md {
 display: block;
 width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 }
 .table-responsive-md > .table-bordered {
 border: 0;
 }
}

@media (max-width: 991.98px) {
 .table-responsive-lg {
 display: block;
 width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 }
 .table-responsive-lg > .table-bordered {
 border: 0;
 }
}

@media (max-width: 1199.98px) {
 .table-responsive-xl {
 display: block;
 width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 }
 .table-responsive-xl > .table-bordered {
 border: 0;
 }
}

.table-responsive {
 display: block;
 width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

.table-responsive > .table-bordered {
 border: 0;
}

```

regards,

Anton