Aligning table cell contents (using javascript or external css files is not an option)

Question

I'm trying to make a table that looks somewhat like the one in the picture below, with a number at the top right of each td cell of the outer table surrounded by a border and text at the bottom left without a border:

As you can see, I've achieved almost what I wanted with a table in each cell, which would be enough if only the top right numbers had borders around them.

My code is as follows:

<style>
    caption {
        font-size: 15px;
    }

    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        border-spacing: none;
        width: 100%;
    }

    td,
    th {
        border-collapse: collapse;
        text-align: center;
    }

    th {
        border: 1px solid black;
        padding: 8px;
    }

    td {
        padding: none;
        border: 1px solid black;
    }

    td .celltable tr td{
        border:none;
    }
    table tr td  .celltable > tr:first-child td:nth-child(2) {
        border-collapse: collapse;
        border: 8px solid black;

    }

and the table:

<table id="tab1">
    <thead>
        <caption><b>Taulukko 1:</b> Kuljetusongelma.</caption>
    </thead>
    <tbody>
        <tr>
            <th colspan="2" rowspan="2" style="border:none;"></th>
            <th colspan="5">Päämäärät</th>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>Tarjonnat</th>
        </tr>
        <tr>
            <th rowspan="2">Lähteet</th>
            <th>1</th>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>8</td>
                    </tr>
                    <tr>
                        <td>[[input:ans1]] [[validation:ans1]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>[[input:ans2]] [[validation:ans2]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>[[input:ans3]] [[validation:ans3]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>11</td>
                    </tr>
                    <tr>
                        <td>[[input:ans4]] [[validation:ans4]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td rowspan="2">[[input:ans5]] [[validation:ans5]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>65</td>
        </tr>
        <tr>

            <th>2</th>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>9</td>
                    </tr>
                    <tr>
                        <td>[[input:ans6]] [[validation:ans6]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>[[input:ans7]] [[validation:ans7]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>[[input:ans8]] [[validation:ans8]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>15</td>
                    </tr>
                     <tr>
                        <td>[[input:ans9]] [[validation:ans9]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="celltable;">
                    <tr>
                        <td></td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>[[input:ans10]] [[validation:ans10]]</td>
                        <td></td>
                    </tr>
                </table>
            </td>
            <td>55</td>
        </tr>
        <tr>

            <th colspan="2">Kysynnät</th>
            <td>25</td>
            <td>40</td>
            <td>15</td>
            <td>20</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

How could I remove the borders from all but the top right cell of the inner tables without removing the borders from the outer table or optionally, is there a better alternative to using tables for alignment?

DanieleAlessandra · Accepted Answer · 2018-11-09 14:57:43Z

2

Try this:

caption {
    font-size: 15px;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    border-spacing: none;
    width: 100%;
}


td,
th {
    border-collapse: collapse;
    text-align: center;
}

th {
    border: 1px solid black;
    padding: 8px;
}

td {
    padding: none;
    border: 1px solid black;
}
table table th, table table td {
  border: none;
}

table table tr:first-child td:nth-child(2) {
  border: 1px solid red;
}

td .celltable tr td{
    border:none;
}
table tr td  .celltable > tr:first-child td:nth-child(2) {
    border-collapse: collapse;
    border: 8px solid black;

}

Only the second cell of the first row in the inner table have borders, is this what you are trying to do?

Look here --> JSBin

edited Nov 9, 2018 at 14:57

answered Nov 9, 2018 at 14:50

DanieleAlessandra

1,5251 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sesodesa Over a year ago

Almost. The outer table cells should also have borders. But within the inner tables the solution you provided is pretty much what I want; only the top right cell should have a border.

DanieleAlessandra Over a year ago

No problem, I modified the fiddle and the answer, click here

Collectives™ on Stack Overflow

Aligning table cell contents (using javascript or external css files is not an option)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related