How to fix Date Picker display issue in Salesforce Lightning components?

When we use lightning:input date field in a custom lightning data table, we see that the date picker not displays properly such as the last column in the date picker goes beyond the table and display outside of it (issue-1). I also come across one more issue related to z-index of the date picker when we use slds-table_fixed-layout class in the <table> (issue-2). Whatever z-index value we set for this field, it always go behind some components. After so much play around with the z-indexes in the console, I finally figured out that the issue is not with the z-index value, but it is with "transform" style attribute used in the table markup.

To fix above issues, add below markup to your component's css file.

For issue-1, add below mark-up to your css file,

.THIS .slds-datepicker table {
    table-layout: fixed;
    width: 300px;
}
.THIS .slds-datepicker .slds-day{
    width: auto !important;
    min-width: auto !important;
    height: auto !important;
    line-height: inherit !important;
}

For issue-2, add below mark-up to your css file. Here, cTable(replace it with your own name) is a class name which should be added to the <table> in your component.

.THIS .cTable.slds-table_fixed-layout tbody {
    transform: none !important;
}

After adding the above markup, it will be fixed and you can see as below.

PS: Thanks for checking this, hope this helps! Please share your feedback/suggestions.