Stick the pencil on the right - html

Question

I'd like to center 'Status' with the pencil on the picture :
Here is the html code :
{{ headers }}
{% load i18n admin_static material_admin %}
{% if results %}
<div class="results">
<table id="result_list" class="table bordered highlight">
<thead>
<tr>
{% for header in result_headers %}
{% if 'action_checkbox' in cl.list_display and forloop.counter == 1 %}
<th class="action-checkbox">
{{ header.text }}<label for="action-toggle"> </label>
</th>
{% else %}
<th scope="col" {{ header.class_attrib }}>
{% if header.sortable %}
{% if header.sort_priority == 0 %}
{{ header.text|capfirst }}
{% elif header.ascending %}
<i class="material-icons">arrow_upward</i>{{ header.text|capfirst }}
{% else %}
<i class="material-icons">arrow_downward</i>{{ header.text|capfirst }}
{% endif %}
{% else %}
<span>{{ header.text|capfirst }}</span>
{% endif %}
</th>{% endif %}{% endfor %}
<th style="text-align:right;" style='postion: relative; right: 500px'>{% trans "Status" %}</th>
{% if row_actions_template %}
<th style="text-align:right;">{% trans "Actions" %}</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for row in results %}
<tr class="{% cycle 'row1' 'row2' %}">
{% for item in row.cols %}
{{ item }}
{% endfor %}
<td class="material-icons">create</td>
{% if row_actions_template %}
<td class="row-actions">{% include row_actions_template with object=row.object %}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% include "loanwolf/pagination.inc.html" %}
The two important lines here are <th style="text-align:right;">{% trans "Actions" %}</th> and <td class="material-icons">create</td>. How could I modify the pencil so that it could be a little bit on the right?
I thought I could do <td class="material-icons" style='position: relative;
right: 200px'>create</td>, but it didn't work.
Thanks in advance!
P.S. Please tell me if the question is unclear.

Answer 1

Don't put your icons in a sub-table. Tables are not meant for layout, they're for displaying tabular data only.
Instead, apply the following to the table cell containing your action buttons:
.actions {
text-align: right;
}
Then just make your icons a list of anchor tags. I'm having to make assumptions about how your icons are structured and their classes because you didn't include the icon html:
<td class="actions">
Action1
Action2
Action3
</td>
Anchor tags are "inline" elements and will respond to text-align styles. Tables, divs, etc. are "block" elements and can't be aligned with text styles.