CODEWITHSUNDEEP
htmlcssresponsive
Nguyễn Vinh
Nguyễn Vinh

Reputation: 33

How to align vertically items in th tag?

i have a table like this table image

how can i set all text position to center of the text box

here is my code 

<table id="zero_config" class="table table-striped table-bordered dataTable"
                                       role="grid" aria-describedby="zero_config_info" style=" table-layout: fixed ;">
                                    <thead>
                                    <tr >
                                        <th rowspan="2" style="text-align: center;padding-top: 0px;">Theo ngày</th>
                                        <th rowspan="2" style="text-align: center;padding-top: 0px;">Tên đối tác</th>
                                        <th colspan="2" style="text-align: center" >Giao dịch cũ - Đã khớp</th>
                                        <th colspan="2" style="text-align: center" >Giao dịch mới đã khớp tự động</th>
                                        <th colspan="2" style="text-align: center" >Giao dịch mới- Lệnh tự động, khớp nhân công</th>
                                        <th colspan="2" style="text-align: center" >Giao dịch mới - Chưa khớp</th>
                                    </tr>
                                    <tr >
                                        <th style="text-align: center">Số lượng GD</th>
                                        <th style="text-align: center">Số gạch nợ (đã có VAT) </th>
                                        <th style="text-align: center">Số lượng GD</th>
                                        <th style="text-align: center">Số gạch nợ (đã có VAT)</th>
                                        <th class="text-center" style="text-align: center;">>Số lượng GD</th>
                                        <th style="text-align: center">Số gạch nợ (đã có VAT)</th>
                                        <th style="text-align: center">Số lượng GD </th>
                                        <th style="text-align: center">Số gạch nợ (đã có VAT)</th>

                                    </tr>

                                    </thead>
                                    <tbody>

Upvotes: 2

Views: 2176

Answers (3)

fr4gm3nt
fr4gm3nt

Reputation: 24

It seems You are using boostrap. Try add to th element:

class="align-middle" and text-center

like:

   <th class="align-middle text-center" rowspan="2">Theo ngày</th>

Upvotes: 0

Ngorld
Ngorld

Reputation: 856

In my understanding your question, you just simple add vertical-align: middle to your table. If not, please detail more your question

.table thead th {
  vertical-align: middle !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table id="zero_config" class="table table-striped table-bordered dataTable" role="grid" aria-describedby="zero_config_info" style=" table-layout: fixed ;">
  <thead>
    <tr>
      <th rowspan="2" style="text-align: center;padding-top: 0px;">Theo ngày</th>
      <th rowspan="2" style="text-align: center;padding-top: 0px;">Tên đối tác</th>
      <th colspan="2" style="text-align: center">Giao dịch cũ - Đã khớp</th>
      <th colspan="2" style="text-align: center">Giao dịch mới đã khớp tự động</th>
      <th colspan="2" style="text-align: center">Giao dịch mới- Lệnh tự động, khớp nhân công</th>
      <th colspan="2" style="text-align: center">Giao dịch mới - Chưa khớp</th>
    </tr>
    <tr>
      <th style="text-align: center">Số lượng GD</th>
      <th style="text-align: center">Số gạch nợ (đã có VAT) </th>
      <th style="text-align: center">Số lượng GD</th>
      <th style="text-align: center">Số gạch nợ (đã có VAT)</th>
      <th class="text-center" style="text-align: center;">>Số lượng GD</th>
      <th style="text-align: center">Số gạch nợ (đã có VAT)</th>
      <th style="text-align: center">Số lượng GD </th>
      <th style="text-align: center">Số gạch nợ (đã có VAT)</th>

    </tr>

  </thead>
  <tbody>

Upvotes: 2

noname
noname

Reputation: 565

I just add 

<style type="text/css">
    table, thead, tr, th {
        display: flex-box;
        border: 1px solid black;
    }

    th {
        height: 100px;
        width: 100px;
    }
</style>

to your html code which you provide and everything is centered horizontally, vertically. Just understand how to use flex-box properly and you should be able to achieve layout you want.

Upvotes: 0

Related Questions