.boats-table {
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.boats-table div {
    width: 100px;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overflow-ellipsis {
    overflow: hidden;        /* Ellipsis won't work without this. */
    text-overflow: ellipsis; /* The most important part */
}

ul.tab {
    width:90%;
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {
    float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}