11

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").

2 Answers 2

5

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>

3
  • 1
    Hi bitstarr, yes partially you are right, rowspan is the thing that I need, but the problem is that I can't use "table-striped" class from bootstrap if I have two "tr", one after each other (because it will make the whole table look gray, instead of "gray, white, gray, white"). Actually the "gray" and "white" text is color of row. Please keep in mind, that I don't always have extra row in my table...so one row can have two "tr" and next one doesn't need to have two "tr". So how can you use "table-striped" bootstrap class, for your solution? (or how to re-create this class to support my case?)
    – L.V
    Commented Jul 25, 2018 at 6:37
  • 1
    I am not so deep into bootstrap, but i think that you reached the boundary of the framework. You might have to do your own classes and styles, because bootstrap simply can't do what you want it to do in this case. Its a very specific issue and frameworks are solutions for generic things. I'm sorry for this disappointing answer, but CSS is powerful enough by itself.
    – bitstarr
    Commented Jul 25, 2018 at 8:06
  • 1
    I have exactly the same problem and this answer is not a solution (as the comments before indicate). So I'd recommend to unselect this answer as the correct one to open up the possibility for others to provide better answers. Commented Sep 29, 2019 at 8:36
4

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.