如何创建以下设计表

Question

如何完成表格设计，如下所示？我要实现的是附加的图像，我正在尝试删除表格右侧和最后一行底部的边框。

@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');
            .data-table { font-size: 15px; line-height: 28px; font-family: Rubik,sans-serif; font-weight: 400;  text-align: left; max-width: 1200px; margin: 0 auto; border: 2px solid #ECEEF0; border-radius: 4px; }
            .data-table th, .data-table td { padding: 5px; border-bottom: 2px solid #ECEEF0; border-right: 2px solid #ECEEF0; margin: 0; vertical-align: top; }
            .data-table tr td:first-child { width: 35%; }
            .data-table tr td:nth-child(2n) { width: 15%; }
            .data-table tr td:nth-child(3n) { width: 50%; }

<table class="data-table" cellpadding="0" cellspacing="0" border="0">
                <thead>
                    <tr>
                        <th>Purposeactivity</th>
                        <th>Type of data</th>
                        <th>Lawful basis of proccesing including basis of legimate interest</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
                        <td>a) Lorem Ipsum, b) Lorem Ipsum</td>
                        <td>Lorem Ipsum is simply dummy text of the printing</td>
                    </tr>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
                        <td>a) Lorem Ipsum, b) Lorem Ipsum, c) Lorem Ipsum, d) Lorem Ipsum, e) Lorem Ipsum, f) Lorem Ipsum</td>
                        <td>a) Lorem Ipsum is simply dummy, b) Lorem Ipsum is simply dummy</td>
                    </tr>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</td>
                        <td>a) Lorem Ipsum, b) Lorem Ipsum, c) Lorem Ipsum</td>
                        <td>a) Lorem Ipsum is simply printing and typesetting dummy, b) Lorem Ipsum printing and typesetting is simply dummy</td>
                    </tr>
                </tbody>
            </table>

Answer 1

使用此CSS，您可以从右侧和底部移除边框

            .data-table,.data-table th:last-child,.data-table td:last-child{
                border-right:0px;}
            .data-table,.data-table tr:last-child td{
                border-bottom:0px;}

@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');
            .data-table { font-size: 15px; line-height: 28px; font-family: Rubik,sans-serif; font-weight: 400;  text-align: left; max-width: 1200px; margin: 0 auto; border: 2px solid #ECEEF0; border-radius: 4px; }
            .data-table th, .data-table td { padding: 5px; border-bottom: 2px solid #ECEEF0; border-right: 2px solid #ECEEF0; margin: 0; vertical-align: top; }
            .data-table tr td:first-child { width: 35%; }
            .data-table tr td:nth-child(2n) { width: 15%; }
            .data-table tr td:nth-child(3n) { width: 50%; }
            .data-table,.data-table th:last-child,.data-table td:last-child{
            border-right:0px;}
            .data-table,.data-table tr:last-child td{
            border-bottom:0px;}

<table class="data-table" cellpadding="0" cellspacing="0" border="0">
                <thead>
                    <tr>
                        <th>Purposeactivity</th>
                        <th>Type of data</th>
                        <th>Lawful basis of proccesing including basis of legimate interest</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
                        <td>a) Lorem Ipsum, b) Lorem Ipsum</td>
                        <td>Lorem Ipsum is simply dummy text of the printing</td>
                    </tr>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td>
                        <td>a) Lorem Ipsum, b) Lorem Ipsum, c) Lorem Ipsum, d) Lorem Ipsum, e) Lorem Ipsum, f) Lorem Ipsum</td>
                        <td>a) Lorem Ipsum is simply dummy, b) Lorem Ipsum is simply dummy</td>
                    </tr>
                    <tr>
                        <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</td>
                        <td>a) Lorem Ipsum, b) Lorem Ipsum, c) Lorem Ipsum</td>
                        <td>a) Lorem Ipsum is simply printing and typesetting dummy, b) Lorem Ipsum printing and typesetting is simply dummy</td>
                    </tr>
                </tbody>
            </table>