Html 列标题居中对齐，但希望单元格右对齐

我希望单元格居中对齐，但保持文本右对齐。有关详细信息，请运行代码

表格{边框：实心；宽度：100%}
th{文本对齐：居中}
td{text align:center}

现在我的表显示如下
helloworldjasper
123456789
123145617891
123124561278912


但是我想喜欢这个
helloworldjasper
123  456  789  
1231 4561 7891  
123124561278912

我用add more

th

和

td

解决了这个问题，但它工作正常

代码

表格{边框：实心；宽度：100%}
th{文本对齐：居中}
td{text align:right}
#运输署{
宽度：20px；
}

现在我的表显示如下
 hello world jasper
 123 456 789
 1231 4561 7891
 12312 45612 78912 

一种解决方案是在th和td元素内添加一个div，并给它们一个固定长度

HTML:

<table>
    <tr>
        <th>
            <div>hello</div>
        </th>
        <th>
            <div>world</div>
        </th>
        <th>
            <div>jasper</div>
        </th>
    </tr>
    <tr>
        <td>
            <div>123</div>
        </td>
        <td>
            <div>456</div>
        </td>
        <td>
            <div>789</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>1231</div>
        </td>
        <td>
            <div>4561</div>
        </td>
        <td>
            <div>7891</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>12312</div>
        </td>
        <td>
            <div>45612</div>
        </td>
        <td>
            <div>78912</div>
        </td>
    </tr>
</table>

table {
    border:solid;
    width:100%
}
td div {
    width:40px;
    text-align:right;
    margin-left: auto;
    margin-right: auto;
}
th div {
    width:40px;
    text-align:right;
    margin-left: auto;
    margin-right: auto;
}

table{border:solid ; width:100%}
th{text-align:center}
td{direction:rtl;}
.title {margin-right:46%;}

<table>  
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr>
<td><span class="title">123</span></td>
<td><span class="title">456</span></td><td><span class="title">789</span></td></tr>  
<tr><td><span class="title">1231</span></td><td><span class="title">4561</span></td><td><span class="title">7891</span></td></tr>  
<tr><td><span class="title">12312</span></td><td><span class="title">45612</span></td><td><span class="title">78912</span></td></tr>  

</table>

试一试：

---

希望有帮助

用下面的代码更改CSS和HTML表格代码

CSS:

<table>
    <tr>
        <th>
            <div>hello</div>
        </th>
        <th>
            <div>world</div>
        </th>
        <th>
            <div>jasper</div>
        </th>
    </tr>
    <tr>
        <td>
            <div>123</div>
        </td>
        <td>
            <div>456</div>
        </td>
        <td>
            <div>789</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>1231</div>
        </td>
        <td>
            <div>4561</div>
        </td>
        <td>
            <div>7891</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>12312</div>
        </td>
        <td>
            <div>45612</div>
        </td>
        <td>
            <div>78912</div>
        </td>
    </tr>
</table>

table {
    border:solid;
    width:100%
}
td div {
    width:40px;
    text-align:right;
    margin-left: auto;
    margin-right: auto;
}
th div {
    width:40px;
    text-align:right;
    margin-left: auto;
    margin-right: auto;
}

table{border:solid ; width:100%}
th{text-align:center}
td{direction:rtl;}
.title {margin-right:46%;}

<table>  
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr>
<td><span class="title">123</span></td>
<td><span class="title">456</span></td><td><span class="title">789</span></td></tr>  
<tr><td><span class="title">1231</span></td><td><span class="title">4561</span></td><td><span class="title">7891</span></td></tr>  
<tr><td><span class="title">12312</span></td><td><span class="title">45612</span></td><td><span class="title">78912</span></td></tr>  

</table>

HTML:

<table>
    <tr>
        <th>
            <div>hello</div>
        </th>
        <th>
            <div>world</div>
        </th>
        <th>
            <div>jasper</div>
        </th>
    </tr>
    <tr>
        <td>
            <div>123</div>
        </td>
        <td>
            <div>456</div>
        </td>
        <td>
            <div>789</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>1231</div>
        </td>
        <td>
            <div>4561</div>
        </td>
        <td>
            <div>7891</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>12312</div>
        </td>
        <td>
            <div>45612</div>
        </td>
        <td>
            <div>78912</div>
        </td>
    </tr>
</table>

table {
    border:solid;
    width:100%
}
td div {
    width:40px;
    text-align:right;
    margin-left: auto;
    margin-right: auto;
}
th div {
    width:40px;
    text-align:right;
    margin-left: auto;
    margin-right: auto;
}

table{border:solid ; width:100%}
th{text-align:center}
td{direction:rtl;}
.title {margin-right:46%;}

<table>  
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr>
<td><span class="title">123</span></td>
<td><span class="title">456</span></td><td><span class="title">789</span></td></tr>  
<tr><td><span class="title">1231</span></td><td><span class="title">4561</span></td><td><span class="title">7891</span></td></tr>  
<tr><td><span class="title">12312</span></td><td><span class="title">45612</span></td><td><span class="title">78912</span></td></tr>  

</table>

helloworldjasper
123
456789
123145617891
123124561278912

输出：

不需要定义表格单元格的固定宽度