Programming

The following snippet of CSS can be used with standard HTML Tables to allow for responsive horizontal scrolling based on max-width media queries. This will prevent broken layouts when tables would otherwise extend beyond the max-width of the screen.

To use this snippet, you must use the a div container with the class of “table-responsive” to wrap your table tag with the class of “table”. Ensure that both the div and table tags have their respective class attributes.

	
	<div class="table-responsive">
		<table class="table">
			<tbody>
				<tr>
					<th>Header 1</th>
					<th>Header 2</th>
					<th>Header 3</th>
				</tr>
				<tr>
					<td>Data 1a</td>
					<td>Data 1b</td>
					<td>Data 1c</td>
				</tr>
				<tr>
					<td>Data 2a</td>
					<td>Data 2b</td>
					<td>Data 2c</td>
				</tr>
				<tr>
					<td>Data 3a</td>
					<td>Data 3b</td>
					<td>Data 3c</td>
				</tr>
			</tbody>
		</table>
	</div>
	

	
		/* .table-responsive is the class attribute for the div */
		/* .table is the class attribute for the table */

		.table-responsive {
		  min-height: .01%;
		  overflow-x: auto;
		}
		@media screen and (max-width:767px) {
		  .table-responsive {
		    width: 100%;
		    margin-bottom: 15px;
		    overflow-y: hidden;
		    -ms-overflow-style: -ms-autohiding-scrollbar;
		    border: 1px solid #ddd;
		    font-size: .75em;
		  }
		  .table-responsive > .table {
		    margin-bottom: 0;
		  }
		  .table-responsive > .table > thead > tr > th,
		  .table-responsive > .table > tbody > tr > th,
		  .table-responsive > .table > tfoot > tr > th,
		  .table-responsive > .table > thead > tr > td,
		  .table-responsive > .table > tbody > tr > td,
		  .table-responsive > .table > tfoot > tr > td {
		    white-space: nowrap;
		  }
		}