blargh


<!DOCTYPE html>
<html>
<header>
    <style>
    #all-scores {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;

        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
        -moz-column-gap: 40px; /* Firefox */
        column-gap: 40px;
    }
    .score  {
        width:100%;
        border: 1px solid black;
        margin: 0 auto;
    }
    .score tr > *{
    }
    .score tr > td + td {
        text-align: left;
        width: 40%;
    }
    .score tr > td + td + td {
        text-align: left;
        width: 60%;
    }
    </style>
</header>
<body>
    <div id="all-scores" >
    <table class="score">
        <tr>
            <td>Jill</td>
            <td>12</td>
        <tr>
            <td>Eve</td>
            <td>18</td>
        </tr>
    </table>
    <table class="score">
        <tr>
            <td>Jill</td>
            <td>22</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>29</td>
        </tr>
    </table>
    <table class="score">
        <tr>
            <td>Jill</td>
            <td>35</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>39</td>
        </tr>
    </table>
    </div>
</body>
</html>