How to pad cell content to center <td> - html

Question

If I have a fixed length text then I can easily center it for example
However, lets say there are data with variable length,
Centering the content of Nickname will affect readability. Is there a way to pad the content and centering it base on the longest length?
<td>
<div style="padding-left: 30%;">
...content
</div>
</td>
The value "30%" is just rough estimate for nickname.
However this 30 percent will changed if the column is expecting a longer data. What is a good way to programatically determine this value that I put as "30" ?
Update, centering text is not what I am looking for. I want to center text AND left align, centering text alone will give me
Visual representation of what I want

Answer 1

You need javascript to determine the width of the content and the table data width.
var td = document.querySelectorAll('td > div');
var width = 0;
var clientWidth = 0;
// determine the width
[].forEach.call(td, function(e) {
clientWidth = e.parentNode.clientWidth; // the width is the same for all td's
if (e.clientWidth > width) {
width = e.clientWidth;
}
});
// set the padding
[].forEach.call(td, function(e) {
e.style.paddingLeft = (clientWidth - width) / 2 + 'px';
e.style.paddingRight = (clientWidth - width) / 2 + 'px';
});
table {
border-collapse: collapse;
}
th {
text-align: center;
}
th, td {
border: 1px solid #000;
}
td > div {
display: inline-block; /* set this because we want to calculate the width, block element has 100% */
padding: 10px 0;
}
<table style="width: 50%">
<tr>
<th>Nickname</th>
</tr>
<tr>
<td><div>Data 1 Data 1Data 1Data 1</div></td>
</tr>
<tr>
<td><div>Data 2</div></td>
</tr>
<tr>
<td><div>Data 3</div></td>
</tr>
<tr>
<td><div>Data 4</div></td>
</tr>
<tr>
<td><div>Data 5</div></td>
</tr>
<tr>
<td><div>Data 6</div></td>
</tr>
<tr>
<td><div>Data 7</div></td>
</tr>
<tr>
<td><div>Data 8</div></td>
</tr>
</table>
Change the hardcoded table width to see the effect.

Answer 2

you can try by mentioning pixels size
<td>
<div style="padding-left: 30px;">
...content
</div>
</td>

Answer 3

Try this,
td{
padding:5px;
text-align:center;
}

Answer 4

so to make it responsive you should use bootstrap 3
try this you will definitely get your answer
bootstrap tables
and there classes
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
</tr>

Answer 5

Update
Technically this answer is correct but we are unable to see it visually so according to me the best way to do this is to add same left and right padding to both <th> and <td> and remove text-align:center from <th>. This is just my opinion. We will wait and see what others think about it. :)
Instead of adding padding to one side you need to add it both the sides.
table tr td{
padding:5px 15%;
}
I have created a simple example.
table{
width:200px;
}
table tr th{
background:#ccc;
text-align:left;
padding:5px 15%;
}
table tr td{
padding:5px 15%;
background:#eee;
}
<table>
<tr>
<th>Nickname</th>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>Big Name</td>
</tr>
<tr>
<td>A Very Big Name</td>
</tr>
<tr>
<td>This is a very big name</td>
</tr>
</table>