HTML-Table: center by longest word-CodePudding

I have this in HTML.

<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%; text-align: center;">mid<br>middle<br>middddle</td>
<td style="text-align: right;">right</td>
</tr>
</table>

Looks like so

------------------------------------------
          |         mid       |      
left      |        middle     |      right     
          |       middddle    |
------------------------------------------

But I want this

------------------------------------------
          |       mid         |      
left      |       middle      |      right     
          |       middddle    |
------------------------------------------

How can I get there with CSS??

EDIT: added with checkbox instead of simple text

Solutions with justify-content works like a charm - but with a checkbox the
seems to be ignored. I replaced for example the checkbox with a string cause I did not expect to have it behave different - I was wrong.

<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%;"><span style="display:flex; justify-content: center;"><input type="checkbox"/>mid<br><input type="checkbox"/>middle<br><input type="checkbox"/>middddle</span></td>
<td style="text-align: right;">right</td>
</tr>
</table>

CodePudding user response：

The below code will help you with your requirement.

<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%; text-align: center;">
<span style="text-align: left; display: inline-block;">mid<br>middle<br>middddle</span>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>

CodePudding user response：

You can assign to the middle td display:flex; and wrap your middle td content in a div container. Like that:

.m-td {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.m-td div{
  text-align: left;
}

<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td >
  <div>
    mid<br>middle<br>middddle
  </div>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>

Update

Thank you for hint @NikeshKp. For some reasons try to avoid use flexbox in the table.

Don't use flex property on tables. If used on mailers it will not work in some email service providers like outlook.

Here the answer without flex.

.m-td {
  text-align: center;
}

.m-td div{
  text-align: left; 
  display: inline-block;
}

<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td >
  <div>
    mid<br>middle<br>middddle
  </div>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>

CodePudding user response：

You can achieve it like this. Hope that how you want it to look.

<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%;">
<span style="display:flex; justify-content:center">
mid<br>middle<br>middddle
</span>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>