设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 我的表格为什么和视频的中演示的结果不一样？
返回列表 发新帖
查看: 3732|回复: 4

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

[复制链接]
骑着蜗牛狂奔
发表于 2019-3-20 06:43:34 | 显示全部楼层 |阅读模式
20鱼币
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset = "utf-8"/>
  5.         <title> 表格</title>
  6.         <style>
  7.                 table{
  8.                         border:1px solid black;
  9.                         border-collapse:collapse;
  10.                 }
  11.                 th{
  12.                         border:1px solid black;
  13.                         background:grey;
  14.                         color:white;
  15.                 }
  16.                 td{
  17.                         border:1px solid black;
  18.                 }
  19.                 table, th, td{
  20.                         padding:5px;
  21.                 }
  22.         </style>
  23. </head>
  24. <body>

  26.                 <table>
  27.                         <caption>复仇者联盟主要成员技能表</caption>
  28.                         <tr>
  29.                                 <th>外号</th>
  30.                                 <th>原名</th>
  31.                                 <th>特长</th>
  32.                                 <th>照片</th>
  33.                         </tr>
  34.                         <tr>
  35.                                 <td>美国队长</td>
  36.                                 <td>史蒂芬·罗杰斯</td>
  37.                                 <td>强化体格</td>
  38.                                 <td><img src="../img/CaptainAmerica.jpg" alt="史蒂芬·罗杰斯" width="300"/></td>
  39.                         </tr>
  40.                         <tr>
  41.                                 <td>钢铁侠</td>
  42.                                 <td>托尼·斯塔克</td>
  43.                                 <td>有钱</td>
  44.                                 <td><img src="../img/IronMan.jpg" alt="托尼·斯塔克" width = "300"/></td>
  45.                         </tr>
  46.                         <tr>
  47.                                 <td>雷神</td>
  48.                                 <td>托尔</td>
  49.                                 <td>操控雷电</td>
  50.                                 <td><img src="../img/Thor.jpg" alt="托尔" width="300"/></td>
  51.                         </tr>
  52.                         <tr>
  53.                                 <td>绿巨人</td>
  54.                                 <td>布鲁斯·班纳</td>
  55.                                 <td>变大变强</td>
  56.                                 <td><img src="../img/Hulk.jpg" alt="布鲁斯·班纳" width= "300"/></td>
  57.                         </tr>
  58.                         <tr>
  59.                                 <td>黑寡妇</td>
  60.                                 <td>娜塔莎·罗曼诺夫</td>
  61.                                 <td>性感</td>
  62.                                 <td><img src="../img/BlackWidow.jpg" alt="布鲁斯·班纳" width="300"/></td>
  63.                         </tr>
  64.                
  65.                 </table>

  67. </body>
  68. </html>
复制代码



捕获.PNG


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

最佳答案
月排行榜 / 总排行榜
不二如是
2019-3-20 06:43:35
1、课程中，先通过CSS添加的如下背景：
Snip20190320_206.png

最佳答案

不二如是

查看完整内容

1、课程中，先通过CSS添加的如下背景：
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2019-3-20 06:43:35 | 显示全部楼层    本楼为最佳答案   
1、课程中，先通过CSS添加的如下背景：
Snip20190320_206.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

骑着蜗牛狂奔
 楼主| 发表于 2019-3-20 22:48:17 From FishC Mobile | 显示全部楼层
不二如是 发表于 2019-3-20 06:43
1、课程中，先通过CSS添加的如下背景：

谢谢，不二老师
来自: 微社区
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

骑着蜗牛狂奔
 楼主| 发表于 2019-3-21 21:34:06 | 显示全部楼层
不二如是 发表于 2019-3-20 06:43
1、课程中，先通过CSS添加的如下背景：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>复仇者联盟主要成员技能表</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="小甲鱼">
  10.     <style>
  11.         table {
  12.             border: 1px solid black;
  13.             border-collapse: collapse;
  14.         }
  15.         /* 将 th 元素的背景色设置为 grey */
  16.         th {
  17.             background: grey;
  18.             color: white;
  19.         }
  20.         th, td {
  21.             border: 1px solid black;
  22.             padding: 5px;
  23.         }
  24.         caption {
  25.             padding: 10px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <table>
  31.         <caption>复仇者联盟主要成员技能表</caption>
  32.     <thead>
  33.         <tr>
  34.             <th>外号</th>
  35.             <th>原名</th>
  36.             <th>特长</th>
  37.             <th>照片</th>
  38.         </tr>
  39.     </thead>
  40.     <tbody>
  41.         <tr>
  42.             <th>美国队长</th>
  43.             <td>史蒂芬·罗杰斯</td>
  44.             <td>强化体格</td>
  45.             <td><img src="img/CaptainAmerica.jpg" alt="美国队长" width="300"></td>
  46.         </tr>
  47.         <tr>
  48.             <th>钢铁侠</th>
  49.             <td>托尼·斯塔克</td>
  50.             <td>有钱</td>
  51.             <td><img src="img/IronMan.jpg" alt="钢铁侠" width="300"></td>
  52.         </tr>
  53.         <tr>
  54.             <th>雷神</th>
  55.             <td>托尔</td>
  56.             <td>操控雷电</td>
  57.             <td><img src="img/Thor.jpg" alt="雷神" width="300"></td>
  58.         </tr>
  59.         <tr>
  60.             <th>绿巨人</th>
  61.             <td>布鲁斯·班纳</td>
  62.             <td>变大变强</td>
  63.             <td><img src="img/Hulk.jpg" alt="绿巨人" width="300"></td>
  64.         </tr>
  65.         <tr>
  66.             <th>黑寡妇</th>
  67.             <td>娜塔莎·罗曼诺夫</td>
  68.             <td>性感</td>
  69.             <td><img src="img/BlackWidow.jpg" alt="黑寡妇" width="300"></td>
  70.         </tr>
  71.     </tbody>        
  72.     </table>
  73. </body>
  74. </html>
复制代码



这个里面没有发现有背景的设置呀  为什么第一竖列也显示灰色？第一竖列不应该属于td标签吗？
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

骑着蜗牛狂奔
 楼主| 发表于 2019-3-21 21:55:11 | 显示全部楼层
不二如是 发表于 2019-3-20 06:43
1、课程中，先通过CSS添加的如下背景：

明白了，看的不够仔细
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-5 20:26

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表