How to align table cells center left? - html

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>