Table cell overflow hidden + Text fade out

by Neviton

HTML

<table>
    <tr>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quis suscipit aut voluptatem porro dolorum odio quas aliquam repellendus esse earum corrupti fuga dolor necessitatibus natus. Itaque nihil optio repellat.
        </td>
        <td>Itaque nihil optio repellat.</td>
    </tr>
</table>
<table class="table">
    <tr>
        <td>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quis suscipit aut voluptatem porro dolorum odio quas aliquam repellendus esse earum corrupti fuga dolor necessitatibus natus. Itaque nihil optio repellat.
            <div class="fade">&nbsp;</div>
        </td>
        <td>
            Itaque nihil optio repellat.
            <div class="fade">&nbsp;</div>
        </td>
    </tr>
</table>

<table class="table-div">
    <tr>
        <td>
            <div class="container">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio quis suscipit aut voluptatem porro dolorum odio quas aliquam repellendus esse earum corrupti fuga dolor necessitatibus natus.
            </div>
            <div class="fade">&nbsp;</div>
        </td>
        <td>
            <div class="container">
            Itaque nihil optio repellat.
            </div>
            <div class="fade">&nbsp;</div>
        </td>
    </tr>
</table>

CSS

table { color: #333; }
table tr td {
    position: relative;
    padding: 10px 20px;
}
table tr td:first-child { background-color: #aff; }
table tr td:last-child { background-color: #ffa; }

.table {
    width: 400px;
}
/* TABLE 1 */
.table tr td {
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
}

/* TABLE 2 */
.table-div {
    width: 80%;
    table-layout:fixed;
}

.table-div tr td:first-child {
    width: 80%;
}

.table-div tr td:last-child {
    width: 20%;
}

.container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.fade {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    padding: 10px 0;
}
tr td:first-child .fade {
    background: linear-gradient(to left, rgba(170,255,255,1) 25%,rgba(170,255,255,0) 100%);    
}
tr td:last-child .fade {
    background: linear-gradient(to left, rgba(255,255,170,1) 25%,rgba(255,255,170,0) 100%);
}