How to customize Element Plus el-table

Question

I'm new to Element Plus and have a little problem using el-table. Can anyone with experience using Element Plus give me an idea or something? I use VueJS and Element Plus. Thanks everyone in advance.

My data:

[
    {
        no: "F",
        type: "Approval",
        name: "Master",
        status: "Approved",
        processDate: "01-01-2024 10:22",
        comment: "Helloo world!"
    },
    {
        no: "G",
        type: "Approval",
        name: "Master",
        status: "Rejected",
        processDate: "01-01-2024 10:22",
        comment: "Comment content 1"
    },
    {
        no: "H",
        type: "Draft",
        name: "Master",
        status: "Rejected",
        processDate: "01-01-2024 10:22",
        comment: "Comment content 2"
    }
]

Original code:

            <table class="w-full">
                <thead class="sticky top-0">
                    <tr class="title text-center bg-indigo-200">
                        <th class="p-10">No</th>
                        <th class="p-10">Type</th>
                        <th class="p-10">Name</th>
                        <th class="p-10">Status</th>
                        <th class="p-10">Process Date</th>
                    </tr>
                </thead>
                <tbody class="overflow-y-auto h-96">
                    <template v-for="(item, index) in props.approvalData" :key="index">
                        <tr class="content-info text-center">
                            <td class="px-6 py-2">{{ item.no }}</td>
                            <td class="px-6 py-2">{{ item.type }}</td>
                            <td class="px-6 py-2">{{ item.name }}</td>
                            <td class="px-6 py-2">{{ item.status }}</td>
                            <td class="px-6 py-2">{{ item.processDate }}</td>
                        </tr>
                        <tr v-if="item.comment" class="content-cmt bg-gray-100">
                            <td class="px-6 py-2"></td>
                            <td class="px-6 py-2 text-center">Comment</td>
                            <td class="px-6 py-2" colspan="4">{{ item.comment }}</td>
                        </tr>
                    </template>
                </tbody>
            </table>

Expected results: enter image description here

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="no" label="No"></el-table-column>
      <el-table-column prop="type" label="Type"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="status" label="Status"></el-table-column>
      <el-table-column prop="processDate" label="Process Date"></el-table-column>
      <el-table-column prop="comment" label="Comment"></el-table-column>
    </el-table>