[已解决]我的表格为什么和视频的中演示的结果不一样？

骑着蜗牛狂奔 · 发表于 2019-3-20 06:43:34

<!DOCTYPE html>
<html>
<head>
        <meta charset = "utf-8"/>
        <title> 表格</title>
        <style>
                table{
                        border:1px solid black;
                        border-collapse:collapse;
                }
                th{
                        border:1px solid black;
                        background:grey;
                        color:white;
                }
                td{
                        border:1px solid black;
                }
                table, th, td{
                        padding:5px;
                }
        </style>
</head>
<body>

                <table>
                        <caption>复仇者联盟主要成员技能表</caption>
                        <tr>
                                <th>外号</th>
                                <th>原名</th>
                                <th>特长</th>
                                <th>照片</th>
                        </tr>
                        <tr>
                                <td>美国队长</td>
                                <td>史蒂芬·罗杰斯</td>
                                <td>强化体格</td>
                                <td><img src="../img/CaptainAmerica.jpg" alt="史蒂芬·罗杰斯" width="300"/></td>
                        </tr>
                        <tr>
                                <td>钢铁侠</td>
                                <td>托尼·斯塔克</td>
                                <td>有钱</td>
                                <td><img src="../img/IronMan.jpg" alt="托尼·斯塔克" width = "300"/></td>
                        </tr>
                        <tr>
                                <td>雷神</td>
                                <td>托尔</td>
                                <td>操控雷电</td>
                                <td><img src="../img/Thor.jpg" alt="托尔" width="300"/></td>
                        </tr>
                        <tr>
                                <td>绿巨人</td>
                                <td>布鲁斯·班纳</td>
                                <td>变大变强</td>
                                <td><img src="../img/Hulk.jpg" alt="布鲁斯·班纳" width= "300"/></td>
                        </tr>
                        <tr>
                                <td>黑寡妇</td>
                                <td>娜塔莎·罗曼诺夫</td>
                                <td>性感</td>
                                <td><img src="../img/BlackWidow.jpg" alt="布鲁斯·班纳" width="300"/></td>
                        </tr>
                
                </table>

</body>
</html>

在小甲鱼老师的视频表格的列也是变色的我的这个为什么不变色？

最佳答案

月排行榜 / 总排行榜

不二如是

2019-3-20 06:43:35

1、课程中，先通过CSS添加的如下背景：

跳转到最佳答案楼层

不二如是 · 发表于 2019-3-20 06:43:35

1、课程中，先通过CSS添加的如下背景：

骑着蜗牛狂奔 · 发表于 2019-3-20 22:48:17

不二如是发表于 2019-3-20 06:43
1、课程中，先通过CSS添加的如下背景：

谢谢，不二老师

来自: 微社区

骑着蜗牛狂奔 · 发表于 2019-3-21 21:34:06

不二如是发表于 2019-3-20 06:43
1、课程中，先通过CSS添加的如下背景：

<!DOCTYPE html>
<html>
<head>
    <title>复仇者联盟主要成员技能表</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
    <meta name="description" content="《零基础入门学习Web开发》案例演示">
    <meta name="author" content="小甲鱼">
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
        }
        /* 将 th 元素的背景色设置为 grey */ 
        th {
            background: grey;
            color: white;
        }
        th, td {
            border: 1px solid black;
            padding: 5px;
        }
        caption {
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <caption>复仇者联盟主要成员技能表</caption>
    <thead>
        <tr>
            <th>外号</th>
            <th>原名</th>
            <th>特长</th>
            <th>照片</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>美国队长</th>
            <td>史蒂芬·罗杰斯</td>
            <td>强化体格</td>
            <td><img src="img/CaptainAmerica.jpg" alt="美国队长" width="300"></td>
        </tr>
        <tr>
            <th>钢铁侠</th>
            <td>托尼·斯塔克</td>
            <td>有钱</td>
            <td><img src="img/IronMan.jpg" alt="钢铁侠" width="300"></td>
        </tr>
        <tr>
            <th>雷神</th>
            <td>托尔</td>
            <td>操控雷电</td>
            <td><img src="img/Thor.jpg" alt="雷神" width="300"></td>
        </tr>
        <tr>
            <th>绿巨人</th>
            <td>布鲁斯·班纳</td>
            <td>变大变强</td>
            <td><img src="img/Hulk.jpg" alt="绿巨人" width="300"></td>
        </tr>
        <tr>
            <th>黑寡妇</th>
            <td>娜塔莎·罗曼诺夫</td>
            <td>性感</td>
            <td><img src="img/BlackWidow.jpg" alt="黑寡妇" width="300"></td>
        </tr>
    </tbody>        
    </table>
</body>
</html>

这个里面没有发现有背景的设置呀为什么第一竖列也显示灰色？第一竖列不应该属于td标签吗？

骑着蜗牛狂奔 · 发表于 2019-3-21 21:55:11

不二如是发表于 2019-3-20 06:43
1、课程中，先通过CSS添加的如下背景：

明白了，看的不够仔细

账号		自动登录	找回密码
密码			立即注册