如何使用 CSS 将表格放置在背景上？答案

【问题标题】：How to position a table over a background using CSS?如何使用 CSS 将表格放置在背景上？
【发布时间】：2021-02-09 21:07:16
【问题描述】：

我需要在当前文档中上移一组表格。

我已尝试调整 CSS 中的边距，但似乎无法正确调整。

这就是我所拥有的：

这就是我想要实现的目标：

最大宽度必须为 700 像素。除了需要向上移动到背景图像上的表格（图像）的定位之外，我已经完成了所有设置。

@charset "UTF-8";
/* CSS Document */
body {
    margin-top:0;
    padding-top:0;
    background:#fff;
    /*JTL ADDED - Limit container max width within BB Content Area*/
    max-width:700px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    
    /*End JTL */}
.background-pic {
            background-image: url("Image Background.png");
            height: 450px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            margin-bottom: -100px;
            max-width: 700px;
}
        h1{
            padding-top: 50px;
            text-align: center;
            font-family: "bebas-neue";
            font-weight: normal;
            font-size: 50px;
            color: #fff;
        }
        .col-welcome-1 {
            float:left;
            margin-left: 25px;}

        .col-navmenu-1 {
            float:right;
            width: 250;
            height: 255;
            margin-right: 25px;
            border-radius: 10px;
            background: #252525;}
        
        h2 {
            color: #FFFFFF;
            text-align: center;
            font-weight: 200;
            font-size: 24px;
            font-family: Gotham, "Helvetica Neue", Arial, "sans-serif";
        }
        .navbuttons {
        padding-left: 45px;
        }

#footer {clear:both;text-align:left;padding:0 12px 2px 12px;background:#eee;
  border-top:1px solid #502e74}
.redline {
    border-bottom-style: solid;
    border-bottom-color: #502e74;
    border-bottom-width: 1px;
}
table { border-spacing: 0px; }  /*JTL Added whole section*/

th, td {                        /*JTL Added whole section*/
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 0px; 

}  /*JTL Added whole section*/

a:link {color:#502e74}
a:visited {color:#036}
a:active {color:#502e74}
a:hover {color:#000;background:#ffc;text-decoration:none}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

<!DOCTYPE html PUBLIC>
<html lang="en">
<link href="Professional Development Getting Started Template Style.css" rel="stylesheet" type="text/css">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <link rel="stylesheet" href="https://use.typekit.net/mlt2oco.css">
    <title>Professional Development Overview Template</title>
</head>
<body>
        <div class="main-content">
            <div id= "banner">
            <div class="background-pic">
            <h1>Professional Development<br>Overview</h1></div> 
            
<table style="margin-left:auto; margin-right: auto; padding-bottom: 25px;">
<tbody>
    <tr>
<td><div class="col-welcome-1"><a href="UNDER CONSTRUCTION PAGE.png"><img src="Welcome Video.png" alt="welcome video" class="rounded" width="320" height="255"></a>
    </div></td>
<td>
    <div class="col-navmenu-1">
           <blockquote>
             <h2>NAVIGATION</h2>
           </blockquote>
           <div class= "navbuttons">
             <a href="UNDER CONSTRUCTION PAGE.png" target="_blank"><img src="How to Navigate button.png" alt="How to Navigate Training " class="rounded" width="175" height="45"></a> 
             <a href="https://trevecca.blackboard.com/webapps/blackboard/content/launchLink.jsp?course_id=_63485_1&tool_id=_158_1&tool_type=TOOL&mode=cpview&mode=reset" target="_blank"><img src="track my progres button.png" alt="Track My Progress" class="rounded" width="175" height="45"></a>
            <a href="UNDER CONSTRUCTION PAGE.png" target="_blank"><img src="faq button.png" alt="How to Navigate Training " class="rounded" width="175" height="45"></a>
            <a href="https://trevecca.blackboard.com/webapps/blackboard/content/launchLink.jsp?course_id=_63485_1&tool_id=_158_1&tool_type=TOOL&mode=cpview&mode=reset" target="_blank"><img src="access modules button.png" alt="How to Navigate Training " class="rounded" width="175" height="45"></a>
            </div>  
    </div>
    </td>
</tr>
    </tbody></table>
</div>
    </div>  
    <div class="resource-content">
        <table style="margin-left:auto; margin-right: auto;">
<tbody>
    <tr>
<td>
        <div class="col-resource-1"> <a href="https://www.youtube.com/watch?v=YPgVFj5okC0&t=1s" target="_blank"><img src="FightforFreedom.png" alt="Salvation Army Justice Action Plan" class="rounded" width="165" height="97"></a></div></td>
         <td><div class="col-resource-2"><a href="https://www.trevecca.edu/graduate" target="_blank"><img src="TNU Graduate Programs.png" alt="Link to Trevecca Gradate Programs" class="rounded" width="165" height="97"></a></div></td>
        <td><div class="col-resource-2"> <a href="https://www.trevecca.edu/programs/organizational-leadership?tab=overview-online" target="_blank"><img src="Trevecca's Master's in Organizational Leadership Program.png" alt="Trevecca's Organizational Leadership program" class="rounded" width="165" height="97"></a></div></td>
    </tr>
            </tbody></table></div>
<div id="footer">
  <p class="xsmall"><strong>Trevecca Nazarene University</strong></p>
<p class="xsmall">Helpdesk Support Contact:<a href="https://trevecca.service-now.com/sp" target="_blank">Online Course Technical Support Site</a></p>
</div>
    
    
            </body>

</html>

【问题讨论】：

标签： css css-position css-tables

【解决方案1】：

我看到的是您的表格内容在您的 div class="main-content" 之外。我建议你去

通过在 h1 标记 Professional Development 之后删除一个结束 div 将表格内容放入 class="main-content"
概述
删除 class="resource-content" 之前的结束 div。
将 css .background-pic 重命名为 .main-content - 这样样式会更有意义。

但总的来说，我认为您在使用正确的 div 时遇到了问题 - 这会在您的网站中造成一些麻烦，并且在样式处理过程中会让人头疼。

【讨论】：

谢谢@iwetish，这行得通。您是否偶然知道为什么在第二个表 (div class="resource-content") 中，当宽度和高度 (width="165" height="97") 相同时，为什么图像看起来大小不同？图片？
太棒了！我真的无法说出这些图片的不同尺寸。在本地，您的代码为那些 img 显示相同大小的 div，所以我假设还有一些其他 stylig 会影响 - 或 td、tr 或其他表格样式中的 smth。

【解决方案2】：

如果您希望表格高于其他内容，一个选项是将位置更改为绝对位置并根据需要调整上/右/下/左。例如：

.col-navmenu-1 {

        position: absolute;
        bottom: 20px;
        left: 500px;
        float:right;
        width: 250;
        height: 255;
        margin-right: 25px;
        border-radius: 10px;
        background: #252525;}

请记住，您必须调整媒体查询。

【讨论】：