Untitled

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>

<style>
    table td:last-child {
        border-left: 1px solid #bababa;
        padding: 0px;
    }

    table tr:last-child td:last-child {
        border-bottom: 1px solid #bababa;
    }

    body {
        background-color: #2c3034;
    }

</style>

</head>
<body>

<br />

<div class="container">

    <table class="table table-dark table-striped table-hover">
        <thead>
            <tr>
                <th>Year</th>
                <th>Data for Town</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td width="10%">2012</td>
                <td>
                    <div id="div1" style="background:#229ac1; width:30%;" class="container">jfiljfrei</div>
                    <div id="div2" style="background:#FF0000;" class="container">jfiljfrei</div>
                </td>
            </tr>
            <tr>
                <td>2014</td>
                <td>Minus</td>
            </tr>
            <tr>
                <td>2013</td>
                <td bgcolor="#FF0000"></td>
            </tr>
            <tr>
                <td>2014</td>
                <td>Minus</td>
            </tr>
            <tr>
                <td>2014</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

</body>
</html>