I'm struggling to center align the headers of a table. Below is the HTML code for the table:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Photo</th>
<th>Description</th>
<th>Location</th>
<th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>
<th class="text-right">Price</th>
<th><span class="d-none d-md-flex mx-auto">Match %</span><span class="d-flex d-md-none mx-auto">Match</span></th>
</tr>
</thead>
<tbody id="lisc_recs"></tbody>
</table>
</div>
The specific column causing issues :
<th><span class="d-none d-md-flex text-center">Disposition</span><span class="d-flex d-md-none mx-auto">Dispo</span></th>
If I remove the responsive display elements inside the , such as span, text alignment can be achieved using .text-center like this:
<th class="text-center">Disposition</th>
Is there a way to center the text inside the span when using d--flex or d--table-cell?
It seems the issue stems from the span consistently spanning the full width of the :