How to align table cells center left?

Question

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 :

Answer 1

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> 

Answer 2

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> 

Answer 3

 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> 

Answer 4

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>