Question

有人可以帮助我解决css问题吗？我希望我的表的最后一列是固定的。第一列和第二列是自动布局，但第三列固定在div元素的右侧。

<div>   
 <table>
        <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>
     <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>

</table>
<div>

Answer 1

这样

table{width:100%;}
table td{border:1px solid #ccc;}

<div>   
 <table cellpadding="0" cellspacing="0">
        <tr>
            <td>text</td>
            <td>text</td>
            <td width="100">text</td>
        </tr>
     <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>

</table>
<div>

Answer 2

正如我在评论中提到的，如果你需要修改最后一栏的宽度，你可以试试

<div>   
 <table style="width:100%;">
        <tr>
            <td>text</td>
            <td>text</td>
            <td width="250px">text</td> <!-- or width="30%" -->
        </tr>
     <tr>
            <td>text</td>
            <td>text</td>
            <td>text</td>
        </tr>

</table>
<div>

如果您只需要将最后一列的内容对齐，请尝试以下操作。

<div>   
 <table style="width:100%;">
        <tr>
            <td>text</td>
            <td>text</td>
            <td style="text-align:right;">text</td>
        </tr>
     <tr>
            <td>text</td>
            <td>text</td>
            <td style="text-align:right;">text</td>
        </tr>

</table>
<div>

Answer 3

我想你正在寻找这个。你可以设置div的所有最后一列右侧。 LiveFiddle。如果有任何问题请在评论中提问我。

table{
  width:100%;
}
td:last-of-type {
 float:right;
}

<div>   
 <table>
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
 <tr >
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>

</table>
<div>

修复了表格的最后一列

3 个答案: