如何使用 CSS 在背景上放置 table？

Question

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

我试过调整 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>

Answer 1

如果您希望 table 覆盖其他内容，一个选项是将位置更改为绝对位置并根据需要调整 top/right/bottom/left。例如：

.col-navmenu-1 {

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

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

Answer 2

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

通过删除 h1 标签后的结束 div 将 table 内容放入 class="main-content" 专业开发
概述
删除 div 之前 class="resource-content".
将 css .background-pic 重命名为 .main-content - 样式会更有意义。

但总的来说，我认为您在使用适当的 div 方面遇到了麻烦 - 这会导致您的网站出现一些问题，并在样式设置过程中令人头疼。

如何使用 CSS 在背景上放置 table？

How to position a table over a background using CSS?

css

css-position

css-tables