带有嵌套td的HTML表

时间:2019-04-20 00:43:37

标签: html css

我正在尝试在const nodemailer = require('nodemailer'); exports.handler = function(event, context, callback) { let transporter = nodemailer.createTransport({ host: 'smtp.gmail.com', port: 465, secure: true, auth: { type: 'OAuth2', user: process.env.MAIL_LOGIN, clientId: process.env.CLIENT_ID, clientSecret: process.env.CLIENT_SECRET, refreshToken: process.env.REFRESH_TOKEN, accessToken: process.env.ACCESS_TOKEN } }); console.log(event.body); transporter.sendMail({ from: process.env.MAIL_LOGIN, to: process.env.MAIL_TO, subject: process.env.SUBJECT + new Date().toLocaleString(), text: event.body }, function(error, info) { if (error) { callback(error); } else { callback(null, { statusCode: 200, body: "Ok" }); } }); } 表标题下添加3列,但是当我为单元格添加值时,所有内容都会损坏 在“ ID”单元格之前还有一个空单元格,我不知道它来自哪里

'Top 10'

感谢您的帮助

2 个答案:

答案 0 :(得分:0)

表的HTML完全关闭。确保使用正确的元素并关闭所有内容。并尝试尽可能多地使用CSS样式。

table {
    border-collapse: collapse;
    width: 100%;
}

td,
th {
    border: 1px solid #000000;
}
<table>
    <thead>
        <tr>
            <th></th>
            <th>Site</th>
            <th colspan="3">Top 10</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="2">1</td>
            <td rowspan="2">Example</td>
            <td>ID</td>
            <td>Name</td>
            <td>From</td>
        </tr>
        
        <tr>
            <td>1</td>
            <td>Kobo</td>
            <td>Jack</td>
        </tr>
    </tbody>
</table>

答案 1 :(得分:0)

您确实需要阅读html规范,字体和中心标签已经过时了几年,您需要使用CSS代替

<!DOCTYPE html>
<html>
    <head>
        <title>ss</title>
        <style>
            body {font: "Arial, Helvetica, sans-serif"}
            table { width: 90%; border-collapse: collapse; margin: 0 auto;}
            td { border: 1px solid #000; }
            td.center, th { text-align: center;}
        </style>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th colspan="4">Header 3</th>
                </tr>
            </thead>
            <!-- Table Content -->
            <tbody>
                <tr>
                    <td class="center">Cell 1</td>
                    <td class="center">Cell 2</td>
                    <td>Cell 3</td>
                    <td>Cell 4</td>
                    <td>Cell 5</td>
                    <td>Cell 6</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>