使用<lightning-datatable>的感觉就像加入了一家大公司，要求你每天穿正装， 规矩太多，没办法调整。

所以我决定以后还是用原始的<table>来自己制作表格。

下面直接给出一个例子，仅供参考：

<template>
        <div class="table-container">
            <div class="header-container">
                <table class="header-table">
                    <thead class="thead-table">
                        <tr>
                            <th scope="col">选择1</th>
                            <template if:true={showSelect2}>
                                <th scope="col">选择2</th>
                            </template>
                            <th scope="col">Link3</th>
                            <th scope="col" class="long-text" style="width:240px;">Text4</th>
                            <th scope="col" class="long-text">Text5</th>
                            <th scope="col">Status6</th>
                            <th scope="col">Status7</th>
                            <th scope="col">Status8</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class=''''data-container''''>
                <table class="data-table">
                    <tbody>
                        <template for:each={tableData} for:item="item" for:index="itemIndex">
                            <tr key={item.Id} data-id={item.Id}>
                                <td><input type="checkbox" data-id={item.Id} checked={item.Select1} onchange={handleSelect1Change}></input></td>
                                <template if:true={showSelect2}>
                                    <td><input type="checkbox" data-id={item.Id} checked={item.Select2} onchange={handleSelect2Change}></input></td>
                                </template>
                                <td><a href={item.link1} target="_blank">{item.link1Label}</a></td>
                                <td class="long-text"  style="width:240px;">{item.Status4}</td>
                                <td class="long-text">{item.Status5}</td>
                                <td>{item.Status6}</td>
                                <td>{item.Status7}</td>
                                <td>{item.Status8}</td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
</template>

import { LightningElement, track } from ''''lwc'''';

export default class Tablepractice extends LightningElement {
    @track tableData = [];
    @track showSelect2 = false;

    connectedCallback() {
        this.showSelect2 = true;
        this.tableData = [
            {''''Id'''': ''''001A1234567891'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''http://salesforcegogogo.com/'''',''''link1Label'''':''''AAA123451'''', ''''Status4'''':''''AAA12345\nAAA12345AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A1234567892'''', ''''Select1'''':false, ''''Select2'''':true, ''''link1'''':''''http://salesforcegogogo.com/'''',''''link1Label'''':''''AAA123452'''', ''''Status4'''':''''AAA12345AAA12345AAA12345AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A1234567893'''', ''''Select1'''':true, ''''Select2'''':true, ''''link1'''':''''http://salesforcegogogo.com/'''',''''link1Label'''':''''AAA123453'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A1234567894'''', ''''Select1'''':false, ''''Select2'''':false, ''''link1'''':''''/5006F00001xveK4QAI'''',''''link1Label'''':''''AAA123454'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A1234567895'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA123455'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A1234567896'''', ''''Select1'''':false, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA123456'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A1234567897'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA123457'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A1234567898'''', ''''Select1'''':false, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA123458'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A1234567899'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA123459'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678910'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234510'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678911'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234511'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678912'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234512'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678913'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234513'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678914'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234514'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678915'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234515'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678916'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234516'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678917'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234517'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678918'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234518'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678919'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234519'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678920'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234520'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678921'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234521'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678922'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234522'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678923'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234523'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678924'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234524'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
            {''''Id'''': ''''001A12345678925'''', ''''Select1'''':true, ''''Select2'''':false, ''''link1'''':''''AAA12345'''',''''link1Label'''':''''AAA1234525'''', ''''Status4'''':''''AAA12345'''', ''''Status5'''':''''AAA12345'''', ''''Status6'''':''''AAA12345'''', ''''Status7'''':''''AAA12345'''', ''''Status8'''':''''AAA12345''''},
        ];
    }

    handleSelect1Change(event){
        const selectedId = event.target.getAttribute(''''data-id'''');
        this.tableData = this.tableData.map(item => {
            if (item.Id === selectedId) {
                return { ...item, Select1: event.target.checked };
            }
            return item;
        });
        console.log(JSON.stringify(this.tableData));
    }

    handleSelect2Change(event){
        const selectedId = event.target.getAttribute(''''data-id'''');
        this.tableData = this.tableData.map(item => {
            if (item.Id === selectedId) {
                return { ...item, Select2: event.target.checked };
            }
            return item;
        });
        console.log(JSON.stringify(this.tableData));
    }
}

table {
    table-layout: fixed;
}
th{
    padding:0;
    padding-left:5px;
    width:100px;
    max-width: 300px;
    border-left: none;
    border-right: none;
    height: auto;
    color:white;
}
td{
    padding:0;
    padding-left:5px;
    text-align: left;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    height: auto;
    max-width: 300px;
    width:100px;
}
.table-container{
    width:100%;
    max-height: 330px;
    background-color: white;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid #ccc;
}
.header-container {
    position: flex;
    z-index: 10;
    width:1000px;
}
.thead-table{
    background-color: #5e6ad6 !important;
    border-color: #5e6ad6 !important;
}
.data-container {
    position: flex;
    z-index: 9;
    overflow: auto; 
    max-height: 310px;
    width:1017px;
}
.data-table {
    overflow: auto; 
}
.center-item{
    justify-content: center;
    align-items: center;
    text-align: center;
}
.long-text{
    white-space: pre;
}

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>