CODEWITHSUNDEEP
csstwitter-bootstraphtml-tablerowmultirow
L.V
L.V

Reputation: 161

Bootstrap table - row with two rows

Is it possible to create a bootstrap table, which will still be "table" and will have two rows in one row (please see enclosed image) while still keeping columns aligned with "thead".

enter image description here

I don't want to make it with div, maybe there is some easy way how to make it as table, but I don't see it. I would like to achieve also "striped class" styling, so that first row will be white, second gray etc. I should be also able to hide extra row ("some other text"), if there are not data, while still keeping first row ("content, content").

Upvotes: 11

Views: 16828

Answers (2)

MCcodemasher
MCcodemasher

Reputation: 98

Two and a half years on, Bootstrap 5 (still in beta as of 7 January 2021) now looks to have a better solution in the ability to nest tables.

https://getbootstrap.com/docs/5.0/content/tables/#nesting

It looks like a subtle but important expansion on the answer provided by bitstarr, particularly because it will allow you to choose whether you want to inherit styling of the parent table or not.

Nesting is just achieved by making sure that you include a "colspan" value in a row, then add another table inside that row.

As a result, the first two rows or your intended outcome (the heading and the first row of content) would look something like this:

<table class="table table-striped">
    <thead>
    <tr>
        <th>head</th>
        <th>title</th>
        <th>title</th>
        <th>title</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">white</td>
    </tr>
    <tr>
        <td colspan="4">
            <table class="table mb-0">
                <tr>
                    <td>
                    Some other text that can be as long as a row
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    </tbody>
</table>

Upvotes: 4

bitstarr
bitstarr

Reputation: 374

I would suggest to take a look at how to mark up tables https://developer.mozilla.org/de/docs/Web/HTML/Element/table

In your case rowspan might become handy

    table {
      border-collapse: collapse;
    }
    table,
    tr,
    th,
    td {
      border: 1px solid #000;
    }

    th {
      padding: 1ex;
      background: #ccc;
    }
    td {
      padding: 1ex;
    }
    .divide td {
      border-top: 3px solid;
    }
<table>
    <tr>
        <th>head</th>
        <th>title</th>
        <th>title</th>
        <th>title</th>
        <th></th>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">white</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">gray</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td>white</td>
    </tr>
    <tr class="divide">
        <td>
            <input type="checkbox">
        </td>
        <td>content</td>
        <td>content</td>
        <td>content</td>
        <td rowspan="2">gray</td>
    </tr>
    <tr>
        <td colspan="4">
            lorem ipsum
        </td>
    </tr>
</table>

Upvotes: 5

Related Questions