Responsive Table

Hello Folks,
You can make the HTML table responsive with some CSS tricks. See the below example and try it.


<div class="responsive-table">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th><b>First Name</b></th>
      <th><b>Last Name</b></th>
      <th><b>Gender</b></th>
      <th><b>Phone</b></th>
      <th><b>Email</b></th>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
  </table>
</div>


.responsive-table{
    width: 100%;
    overflow-y:hidden
}

First NameLast NameGenderPhoneEmail
JohnCenaMale123-456-7890abc123@gmail.com
JohnCenaMale123-456-7890abc123@gmail.com
JohnCenaMale123-456-7890abc123@gmail.com
JohnCenaMale123-456-7890abc123@gmail.com

Full width DIV inside container


<div class="container">
    <div class="my-wrapper">         
        <div class="my-container">Your content goes here...</div>
    </div>
</div>


html {
    width: 100%;
    height: 100%;
}

.container {
    width: 300px;
    background-color: red;
    margin: 0 auto;
    height: 1000px;
    position: relative;
    padding-top: 100px;
}

.my-wrapper {
    position: relative;
}

.my-container {
    height: 300px;
    background-color: #0f0;
    width: 100vw;
    margin-left: calc(-50vw + 50% - 8px);
    position: relative;
}

Smooth scrolling for hash links in WordPress

Here is the markup code.


<a href="#aboutme">Go to About Me</a>

<div id="aboutme">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum, felis sit amet faucibus dictum, arcu felis mollis neque, in tristique enim neque sit amet velit. Nulla tristique sapien in libero molestie, a egestas quam bibendum. Suspendisse nec efficitur lacus. Duis interdum nisl eros, sed elementum massa efficitur eu.</p>
</div>

Step 1

You need to create a file global.js in your child theme’s js directory (create, if not present) with following code:


jQuery(function( $ ){
	// Smooth scrolling when clicking on a hash link
	$('a[href^="#"]').on('click',function (e) {
		e.preventDefault();

		var target = this.hash;
		var $target = $(target);

		$('html, body').stop().animate({
			'scrollTop': $target.offset().top
		}, 900, 'swing');
	});
});

If you are making fixed header and would like to set an offset for the scroll position, subtract the height of your fixed element like so:


'scrollTop': $target.offset().top-120

where 120 is the height of the fixed header in px in the below example.

To set an offset at viewport widths greater than a specific width, use this sample global.js instead:


jQuery(function( $ ){
	// Smooth scrolling when clicking on a hash link
	$('a[href^="#"]').on('click',function (e) {
		e.preventDefault();

		var target = this.hash;
		var $target = $(target);

		if ( $(window).width() > 1023 ) {
			var $scrollTop = $target.offset().top-120;
		} else {
			var $scrollTop = $target.offset().top;
		}

		$('html, body').stop().animate({
			'scrollTop': $scrollTop
		}, 900, 'swing');
	});
});

Step 1

Add the following code in your child theme’s functions.php:


// Enqueue site-wide scripts
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {

	wp_enqueue_script( 'global', get_stylesheet_directory_uri() . '/js/global.js', array( 'jquery' ), '', true );

}

That’s it.