CODEWITHSUNDEEP
htmlcsshtml-table
Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48367

How to align table cells center left?

I have a simple table structure.

table > tbody > tr > td{
  text-align:center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
<table class="table table-hover">
      <thead>
        <tr>
          <td>Client</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-md-4">
            C 1
          </td>
        </tr>
        <tr>
          <td class="col-md-4">
            Client 2
          </td>
        </tr>
      </tbody>
    </table>

The question is : How can I align td-s content left and center. ?

The output should be something like this : enter image description here

Upvotes: 3

Views: 6030

Answers (4)

Thuc Nguyen
Thuc Nguyen

Reputation: 233

Try colspan="<number of columns to merge>" and rowspan="<number of rows to merge>" to merge row or column: 

<table>
    <thead>
    <tr>
        <td colspan="2" align="center">Client</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2" width="50%"></td>
        <td>
            C 1
        </td>
    </tr>
    <tr>
        <td>
            Client 2
        </td>
    </tr>
    </tbody>
</table>

Upvotes: 0

Pete
Pete

Reputation: 58432

If you are wanting the lower cells to be left justified from the centre, then just add padding-left 50% to your body cells

.table tbody td {
  padding-left: 50%;
  text-align;
  left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
  <thead>
    <tr>
      <td>Client</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-md-4">
        C 1
      </td>
    </tr>
    <tr>
      <td class="col-md-4">
        Client 2
      </td>
    </tr>
  </tbody>
</table>

If you want them centred to the largest word, then left-aligned, you cannot have separate rows for the tbody, you would need to wrap all the words in an inline block div:

.col-md-4 {
  text-align: center;
}

.inline-block {
  display: inline-block;
  text-align: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet" />
<table class="table table-hover">
  <thead>
    <tr>
      <td>Client</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-md-4">
        <div class="inline-block">
          C 1<br> Client 2
        </div>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 4

Muhammad Bilal
Muhammad Bilal

Reputation: 3008

td {
  width: 50%;
}
td:last-child {
  border-left:1px solid #333;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
    <table class="table table-hover">
      <thead>
        <tr>
          <td>Client</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
          </td>
          <td>
            C 1
          </td>
        </tr>
        <tr>
          <td>
          </td>
          <td>
            Client 2
          </td>
        </tr>
      </tbody>
    </table>

Upvotes: 1

Savado
Savado

Reputation: 585

Try this:

td {
  width: 50%;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
    <table class="table table-hover">
      <thead>
        <tr>
          <td>Client</td>
          <td></td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
          </td>
          <td>
            C 1
          </td>
        </tr>
        <tr>
          <td>
          </td>
          <td>
            Client 2
          </td>
        </tr>
      </tbody>
    </table>

If you can't add extra table-cells you could use padding:

.table tbody td {
  padding-left: 50%;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" rel="stylesheet"/>
    <table class="table table-hover">
      <thead>
        <tr>
          <td>Client</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            C 1
          </td>
        </tr>
        <tr>
          <td>
            Client 2
          </td>
        </tr>
      </tbody>
    </table>

Upvotes: 2

Related Questions