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

Question

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

table{border:solid ; width:100%}

th{text-align:center}
td{text-align:center}

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

</table>
<br>
<div>but i want to like this</div>
<table>  
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr><td>&nbsp;&nbsp;123</td><td>&nbsp;&nbsp;456</td><td>&nbsp;&nbsp;789</td></tr>  
<tr><td>&nbsp;1231</td><td>&nbsp;4561</td><td>&nbsp;7891</td></tr>  
<tr><td>12312</td><td>45612</td><td>78912</td></tr>  

</table>

Answer 1

我通过添加更多th和td来解决它，但它正常工作

码

＆＃13;

＆＃13;

table{border:solid ; width:100%}

th{text-align:center}
td{text-align:right}
#td{
  width: 20px;
}

＆＃13;

<div>now my table show like this</div>
<table>  
<tr><th>&nbsp</th><th id="td">hello</th><th>&nbsp</th><th id="td">world</th><th>&nbsp</th><th id="td">jasper</th><th>&nbsp</th></tr>
<tr><td>&nbsp</td><td id="td">123</td><td>&nbsp</td><td id="td">456</td><td>&nbsp</td><td id="td">789</td><td>&nbsp</td></tr>  
<tr><td>&nbsp</td><td id="td">1231</td><td>&nbsp</td><td id="td">4561</td><td>&nbsp</td><td id="td">7891</td><td>&nbsp</td></tr> 
<tr><td>&nbsp</td><td id="td">12312</td><td>&nbsp</td><td id="td">45612</td><td>&nbsp</td><td id="td">78912</td><td>&nbsp</td></tr>

＆＃13;

＆＃13;

＆＃13;

http://liveweave.com/6EFpKY

Answer 2

一种解决方案是在th 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>

<强> CSS：

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;
}

尝试一下：

http://fiddle.jshell.net/hdgjnuab/1/

希望它有所帮助！

Answer 3

将CSS和HTML表格代码改为低于一。

<强> CSS：

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

<强> HTML：

<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>

<强>输出：

无需定义表格单元格的固定宽度。