menu

Questions & Answers

How do I make a table in bootstrap which has a title and 4 cells per row?

I am trying to create a table which has a centered title (which is essentially one row) and then has multiple columns spaced out evenly as table elements in the body. However when I try this, the table title field spazzes out and gets sized down which I don't want.

What I want is essentially this:

enter image description here

However when I try to do what I had in mind: this happens.

enter image description here

My code that I (tried to) use to create the table as in the desired example:

@extends('layouts.app')
@section('content')
<div class="container-fluid">
    <table class="table">
       <thead>
            <tr>
                <th class="lopendeopdrachten">Opdrachten</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>test<td>
                <td>test<td>
                <td>test<td>
                <td>test<td>
            </tr>
        </tbody>
    </table>  
</div>
@endsection

I am programming this in laravel which includes bootstrap for reference.

If anything is still unclear please do ask. Also, if this is a duplicate question I apologize. I couldn't find any comparable problems, though.

Comments:
2023-01-22 23:30:08
try <th class="lopendeopdrachten" colspan="4">Opdrachten</th>
Answers(2) :

You're missing the colspan attr

<th class="lopendeopdrachten text-center" colspan="4">Opdrachten</th>
Comments:
2023-01-22 23:30:08
Your question was partly correct. I had to double the span from 4 to 8 for the full row to return for some odd reason. Now to see if I can have the cells equally spaced out..
2023-01-22 23:30:08
Could you paste the full HTML code or a Screen shot URL of the dsired result , so we can help ?
2023-01-22 23:30:08
I already figured it out. In my case I had to double the colspan with the amount of cells I needed. For example: If I had a row with 4 cells, I'd have to make the table header span 8 to get the desired result.
2023-01-22 23:30:08
Well, glad if my answer helped !

what you want is a table with an irregular header right? This link should have all your needs for irregular tables like irregular rows and headers. It's not really a bootstrap problem but an HTML one so I think referring to the link given above should give what you need.