Tables On Sing Doc Page – Not Responsive

Hello there,

I hope you are doing well.

I have checked your website and It seems an scrollbar is now enabled on your website. If you want to make it more responsive, you can use this Custom CSS given below. Please check this screencast to see how it looks like after adding this CSS.

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)  {
	.docs-single-main .wp-block-table table, thead, tbody, th, td, tr {
		display: block;
        text-align: right!important;
	}
    
	.docs-single-main .wp-block-table thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

    .docs-single-main .wp-block-table tr {
        margin: 0 0 1rem 0;
    }
      
    .docs-single-main .wp-block-table tr:nth-child(odd) {
        background: #ccc;
    }
    
	.docs-single-main .wp-block-table td {
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	.docs-single-main .wp-block-table td:before {
		position: absolute;
		top: 20px;
    	left: 10px;
		padding-right: 10px;
		white-space: nowrap;
        text-align: left
	}

	.docs-single-main .wp-block-table td:nth-of-type(1):before { content: "TSB Number"; }
	.docs-single-main .wp-block-table td:nth-of-type(2):before { content: "Subject"; }
	.docs-single-main .wp-block-table td:nth-of-type(3):before { content: "Date"; }
	.docs-single-main .wp-block-table td:nth-of-type(4):before { content: "View/Download"; }
	.docs-single-main .wp-block-table td:nth-of-type(5):before { content: "Applies To"; }
}

You can simply add custom CSS by navigating to your WordPress Dashboard -> Appearance -> Customize.

After you are on the Customizer page, search for the “Additional CSS” option.

You can then go ahead and insert the CSS Code. Please check this screencast to learn more – https://d.pr/v/QrrfTw

Let me know how it goes. Thank you!