Absolute position table with padding

Today, I have a task of widening the tables to match 100% browser width to view more contents while keeping other elements stay the as they were.


The problem is, I have so many tables to do (about 20 pages including that kind of table). I am too lazy to edit all of those pages. It really takes time and potential to introduce bugs.

So, I choose javascript and CSS to help me out.

Firstly, those tables have the class named “table_wide”.

We will use the CSS absolute position’s power of ignorance. We can make the table to be absolute with 100% percent width. But the problem is, it also ignores padding or margin. So our table will be stuck to the left and right edges.

Well, challenge accepted.

Absolute position ignores everything but it has top, right, bottom and left instead. However, top, right, bottom and left are not adapted to its width. So we cannot use padding properly.

We will use what we have to acquire what we want.

var paddingInPx = 10;
var windowWidthInPx = $(window).width();

// Calculate the width of table.
var thisWidthInPercent = 100 - (100/windowWidthInPx*2*paddingInPx);

// Create an empty div to fill up the space the absolute table occupied in the past.
$(this).after('<div style="height: ' + this.offsetHeight + 'px;"></div>');
$(this).wrap('<div style="position: absolute; width: ' + thisWidthInPercent + '%; left: ' + paddingInPx + 'px"></div>');

.table_wide {
    display: block;
    overflow: auto;

Well done! Challenge accomplished.

Jsfiddle: https://jsfiddle.net/ducfilan/p961moLd/


How to sync “loved” songs from iTunes to your iPhone

That’s it the intent is in the title itself, I don’t wanna describe no more.

Step 1: Open iTunes and select File > New > Smart Playlist…

Screen Shot 2017-11-29 at 7.58.54 PM

Step 2: Select the “Love” is “Loved” condition:

Screen Shot 2017-11-29 at 7.59.18 PM

These steps will create a playlist of your loved songs which is updated lively over the time.

Screen Shot 2017-11-29 at 7.59.30 PM

Create a shortcut to open Terminal in Mac OSX

Launch Automator. Create a document of type “Service”. In the document, add a “Run AppleScript” action. Here’s the AppleScript to paste into the action:

on run {input, parameters}
    tell application "Terminal"
        do script ""
    end tell
    return input
end run

Set the “Service receives” popup to “no input”. It should look like this overall:

Service definition

Save the document with the name “New Terminal”. Then go to the Automator menu (or the app menu in any running application) and open the Services sub menu. You should now see the “New Terminal” service:

New Terminal service menu item

If you click it, Terminal should open a new window.

To assign a keyboard shortcut to it, choose the “Services Preferences…” item from that menu. (Or launch System Preferences, choose the Keyboard pane, then choose the Shortcuts tab, then choose Services from the left-hand list.) Scroll to the bottom of the right-hand list and find the New Terminal service. Click the right end of the New Terminal row and press your preferred keyboard shortcut:

New Terminal shortcut

Now you should be able to press your keyboard shortcut in most circumstances to get a new terminal window.