CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Stefan Momcilovic
Stefan Momcilovic

Reputation: 624

How to align text inside table thead to center horizontally and vertically

I have one question how can I align my text inside thead to center horizontally and verticallyTable

<table id="stanari" class="table table-striped table-bordered w-100 animate__animated animate__fadeIn">
    <thead>
        <tr>
            <th>First name and last name of tenants</th>
            <th>Cell phone of tenants</th>
            <th>Apartment address</th>
            <th>Number at the door of the apartment</th>
            <th>Paid deposit in euros</th>
            <th>Date of tenants registration</th>
            <th>Monthly rent in euros</th>
            <th>Is the monthly rent paid</th>
            <th>Payment date</th>
            <th>For month</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Upvotes: 1

Views: 2934

Answers (2)

dale landry
dale landry

Reputation: 8610

Add the bootstrap class align-middle and text-center to the th elements.

Bootstrap Vertical alignment also Bootstrap Text alignment

th:nth-of-type(1),
th:nth-of-type(4),
th:nth-of-type(5),
th:nth-of-type(8){
  min-width: 150px;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table id="stanari" class="table table-striped table-bordered w-100 animate__animated animate__fadeIn">
    <thead>
        <tr>
            <th class="align-middle text-center">First name and last name of tenants</th>
            <th class="align-middle text-center">Cell phone of tenants</th>
            <th class="align-middle text-center">Apartment address</th>
            <th class="align-middle text-center">Number at the door of the apartment</th>
            <th class="align-middle text-center">Paid deposit in euros</th>
            <th class="align-middle text-center">Date of tenants registration</th>
            <th class="align-middle text-center">Monthly rent in euros</th>
            <th class="align-middle text-center">Is the monthly rent paid</th>
            <th class="align-middle text-center">Payment date</th>
            <th class="align-middle text-center">For month</th>
            <th class="align-middle text-center"></th>
        </tr>
        <tr>
            <td class="align-middle text-center col-3">John and Jane Doe</td>
            <td class="align-middle text-center">555-555-5555</td>
            <td class="align-middle text-center">5555 Someroad streer</td>
            <td class="align-middle text-center">555</td>
            <td class="align-middle text-center">1555 Euro</td>
            <td class="align-middle text-center">5-5-21</td>
            <td class="align-middle text-center">2555 Euro</td>
            <td class="align-middle text-center">Paid in full</td>
            <td class="align-middle text-center">5-1-21</td>
            <td class="align-middle text-center">May</td>
            <td class="align-middle text-center">N/A</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Upvotes: 1

Allam
Allam

Reputation: 144

by default th tags should be aligned center vertically, so you've something overides the default behavior which i recommend you to fix.

however, you can still fix this issue by css like the following:

th {
 display:flex,
 align-items:center,
}

Upvotes: 0

Related Questions