exhtml
9/5/2017 - 8:15 AM

Table maintain column widths when changing content

Table maintain column widths when changing content

table-maintain-widths.scss
content_copyfile_download

.fru { 
    width: 720px;
    border-collapse: collapse;
}
.fru td {
    overflow: hidden;
    /*white-space: nowrap;*/
    white-space: normal;
}
.fru td span {
    /*width: 100%;*/
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fru tr td:nth-of-type(1) { width: 120px; }
.fru tr td:nth-of-type(2) { width: 200px; }
.fru tr td:nth-of-type(3) { width: 100px; }
.fru tr td:nth-of-type(4) { width: 100px; }
.fru tr td:nth-of-type(5) { width: 200px; }

.fru tr td:nth-of-type(1) span { width: 120px; }
.fru tr td:nth-of-type(2) span { width: 200px; }
.fru tr td:nth-of-type(3) span { width: 100px; }
.fru tr td:nth-of-type(4) span { width: 100px; }
.fru tr td:nth-of-type(5) span { width: 200px; }
table-maintain-widths.html
content_copyfile_download
<table class="fru" cellpadding="0" cellspacing="0">
    <tr>
        <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></td>
        <td><span>Cras finibus erat sit amet lorem pharetra, </span></td>
        <td><span>Etiam metus leo, mollis imperdiet suscipit sit amet, pulvinar a magna.</span></td>
        <td><span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</span></td>
        <td><span>Nulla facilisi.</span></td>
    </tr>

    <tr>
        <td><span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</span></td>
        <td><span>Cras finibus erat sit amet lorem pharetra, </span></td>
        <td><span>Nulla facilisi.</span></td>
        <td><span>Etiam metus leo, mollis imperdiet suscipit sit amet, pulvinar a magna.</span></td>
        <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></td>
    </tr>

    <tr>
        <td><span>Nulla facilisi.</span></td>
        <td><span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</span></td>
        <td><span>Etiam metus leo, mollis imperdiet suscipit sit amet, pulvinar a magna.</span></td>
        <td><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></td>
        <td><span>Cras finibus erat sit amet lorem pharetra, </span></td>
    </tr>

</table>