如何增加表格宽度

Question

我正在尝试增加表格宽度并填充额外的空格，但列的宽度并没有改变我在下面给我的宽度：

            <tr v-for="user in paginatedUsers" :key="user.id">
                <td style="width: 10%">{{user.id}}</td>
                <td style="width: 30%">{{user.case_id}}</td>
                <td style="width: 40%">{{user.user_id}}</td>
                <td style="width: 50%">{{user.message_title}}</td>
                <td style="width: 60%">{{user.process_type}}</td>
                <td style="width: 70%">{{user.msg_code}}</td>
                <td style="width: 80%">{{user.log_type}}</td>
                <td style="width: 90%">{{user.created_at}}</td>
            </tr>
            </tbody>

我还附上了我的数据表的屏幕截图：

我哪里出错了？

Answer 1

列的总宽度应为 100%。请试试这个。

<tr v-for="user in paginatedUsers" :key="user.id">
    <td style="width: 5%">{{user.id}}</td>
    <td style="width: 10%">{{user.case_id}}</td>
    <td style="width: 10%">{{user.user_id}}</td>
    <td style="width: 20%">{{user.message_title}}</td>
    <td style="width: 20%">{{user.process_type}}</td>
    <td style="width: 5%">{{user.msg_code}}</td>
    <td style="width: 10%">{{user.log_type}}</td>
    <td style="width: 20%">{{user.created_at}}</td>
</tr>