How to align multiple table columns vertically

Question

I have multiple tables with the following structure:

<table>
    <tr>
        <td colspan="4">year</td>
    </tr>
    <tr>
        <td colspan="2">semester</td>
        <td colspan="2">semester</td>
    </tr>
    <tr>
        <td>course type</td>
        <td>course</td>
        <td>course type</td>
        <td>course</td>
    </tr>
</table>

Because the contents of the tables are not the same, cells don't line up vertically, and I get an ugly look.

/* set-up */
* {
    box-sizing: border-box;
}
 body {
    background: gainsboro;
}
#container {
    width: 752px;
    box-shadow: 0 0 5px silver;
    min-height: 200px;
    background: white;
    padding: 20px;
    font-family: Arial;
    font-size: 15px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, .7);
}
table:last-child {
    margin-bottom: 0;
}
tr.thead td, td.thead {
    font-weight: bold;
    background: rgba(0, 0, 0, .05);
    text-align: center;
    color: rgba(0, 0, 0, .55);
}
tr.thead2 td, td.thead2 {
    font-weight: bold;
    background: rgba(0, 0, 0, .1);
    text-align: center;
    color: rgba(0, 0, 0, .55);
}
table td {
    border: 1px solid rgb(200, 200, 200);
    padding: 4px;
}

<div id="container">
    <table>
        <tr class="thead">
            <td colspan="4">Third-year (2015-2016)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dil Becerilerinin Öğretimi I</td>
            <td>A</td>
            <td>Çocuklara Yabancı Dil Öğretimi I</td>
        </tr>
    </table>
    <table>
        <tr class="thead">
            <td colspan="4">Second-year (2014-2015)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dilbilim I</td>
            <td>A</td>
            <td>Dilbilim II</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dil Edinimi</td>
            <td>A</td>
            <td>İngilizce Öğretiminde Yaklaşımlar I</td>
        </tr>
    </table>
    <table>
        <tr class="thead">
            <td colspan="4">First-year (2013-2014)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Bağlamsal Dilbilgisi I</td>
            <td>A</td>
            <td>Bağlamsal Dilbilgisi II</td>
        </tr>
        <tr>
            <td>A</td>
            <td>İleri Okuma ve Yazma I</td>
            <td>A</td>
            <td>İleri Okuma ve Yazma II</td>
        </tr>
    </table>
</div>

If I give cells a fixed width, I get the desired result (Fiddle).

/* course-type cells */
tr:nth-child(n+2) td:nth-child(odd) {
    width: 50px;
}
/* course cells */
tr:nth-child(n+2) td:nth-child(even) {
    width: 306px;
}

But that works only if I enter the widths manually. I want the course-type cells to be 50px, and course cells to take the remaining space. 306px isn't a fixed value. If the width of the container changes, 306px won't work because table's width is set to 100%. So I thought about using calc function:

/* course cells */
tr:nth-child(n+2) td:nth-child(even) {
    /* (container-width(752) - (course-type-cell*2) - (container-padding*2)) / 2 */
    width: calc((100% - (50px * 2) - (20px * 2)) / 2); /* 306px */
}

but it doesn't work. I don't think calc is getting the correct 100% value, or not getting it at all. I wanted to make sure that all parent elements inherit the container's width, so that calc would work

table, tbody, tr {
    width: 100%;
}

but it didn't work. Is using fixed width my only option, or is there a way to make calc work?

Answer 1

You can use this

table-layout: fixed;

https://css-tricks.com/fixing-tables-long-strings/

Answer 2

Instead of using separate tables, you can use one table with invisible spacer rows to make each section look like a separate table. That way it will behave as one table when the browser calculates the layout, but the final result will look like three tables.

The general idea is that you have it all in one table, and between each section you will a spacer row that looks like this:

<tr class="spacer"><td colspan="4">&nbsp;</td></tr>

The spacer row has the following CSS style to make it invisible:

tr.spacer td {
    border: none;
}

---

Here is a screenshot of the final result:

And here is a Live Demo of the code in action:

/* set-up */
* {
    box-sizing: border-box;
}
 body {
    background: gainsboro;
}
#container {
    width: 752px;
    box-shadow: 0 0 5px silver;
    min-height: 200px;
    background: white;
    padding: 20px;
    font-family: Arial;
    font-size: 15px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, .7);
}
table:last-child {
    margin-bottom: 0;
}
tr.thead td, td.thead {
    font-weight: bold;
    background: rgba(0, 0, 0, .05);
    text-align: center;
    color: rgba(0, 0, 0, .55);
}
tr.thead2 td, td.thead2 {
    font-weight: bold;
    background: rgba(0, 0, 0, .1);
    text-align: center;
    color: rgba(0, 0, 0, .55);
}
table td {
    border: 1px solid rgb(200, 200, 200);
    padding: 4px;
}

tr.spacer td {
    border: none;
}

<div id="container">
    <table>
        <tr class="thead">
            <td colspan="4">Third-year (2015-2016)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dil Becerilerinin Öğretimi I</td>
            <td>A</td>
            <td>Çocuklara Yabancı Dil Öğretimi I</td>
        </tr>
        <tr class="spacer"><td colspan="4">&nbsp;</td></tr>
        <tr class="thead">
            <td colspan="4">Second-year (2014-2015)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dilbilim I</td>
            <td>A</td>
            <td>Dilbilim II</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Dil Edinimi</td>
            <td>A</td>
            <td>İngilizce Öğretiminde Yaklaşımlar I</td>
        </tr>
        <tr class="spacer"><td colspan="4">&nbsp;</td></tr>
        <tr class="thead">
            <td colspan="4">First-year (2013-2014)</td>
        </tr>
        <tr class="thead2">
            <td colspan="2">Autumn</td>
            <td colspan="2">Spring</td>
        </tr>
        <tr>
            <td>A</td>
            <td>Bağlamsal Dilbilgisi I</td>
            <td>A</td>
            <td>Bağlamsal Dilbilgisi II</td>
        </tr>
        <tr>
            <td>A</td>
            <td>İleri Okuma ve Yazma I</td>
            <td>A</td>
            <td>İleri Okuma ve Yazma II</td>
        </tr>
    </table>
</div>

JSFiddle Version: https://jsfiddle.net/bmyhqevw/