Table column spacing take up last space without using colspan

Question

I have a table with four rows. Inside of row 1 there is 1 column. Inside of row 2 there is 3 columns. Inside of row 3 there is 2 columns. Inside row 4 there is 2 columns. The column of row 1 has a colspan of 3 so that the column spans the whole table but in rows 3 and 4 I want the two columns to spread equally to the full width of the table. The problem is that I cannot add a colspan of 1.5 it just doesn't work. My question is how can I get the columns of rows 3 and 4 to span equally across the table in an even matter?

The code that I have is:

<table id="tbContainer" style="table-layout:fixed;" cell-padding="0" cell-spacing="0">
<tr>
    <td colspan="3">
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>
<tr>
    <td>
        <button style="width: calc(100%);">Button</button>
    </td>
    <td>
        <button style="width: calc(100%);">Button</button>
    </td>
    <td>
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>
<tr>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>
<tr>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
    <td colspan="1.5">
        <button style="width: calc(100%);">Button</button>
    </td>
</tr>

Welcome to StackOverflow! In order for us to help you better, can you please update your question so that it shows your **relevant code** in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). It would also be helpful if you could let us know what you have [**tried so far**](http://meta.stackoverflow.com/questions/261592) to solve your problem. For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour) :) — Obsidian Age, Dec 13 '17 at 03:57
@ObsidianAge added code. I explained what i have tried in the post — mr developer, Dec 13 '17 at 04:08

score 0 · Accepted Answer · answered Dec 13 '17 at 08:01

How about a table 12 cells wide. 12 can be factored by all of the column widths you require.

Row 1 colspan 12 - 1 column
Row 2 colspan 4 - 3 columns
Row 3 colspan 6 - 2 columns
Row 4 colspan 6 - 2 columns

<table id="tbContainer" style="table-layout:fixed;" cell-padding="0" cell-spacing="0">
    <tr>
        <td colspan="12">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="4">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="4">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
    <tr>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
        <td colspan="6">
            <button style="width: calc(100%);">Button</button>
        </td>
    </tr>
</table>

Table column spacing take up last space without using colspan

1 Answers1