html - CSS:如何配置图像然后配置表格？

我有一个 html 文件，我希望它有一个标题图像，跨越整个屏幕宽度，但要有它的原始高度。在它后面是一张 table 。

我为 CSS 设置而苦恼。我得到的表格与图像重叠，图像超出屏幕宽度，我希望它处于屏幕宽度。这是 html 文件的开头:

<!DOCTYPE html>

<html>
    <script type="text/javascript">var statsDate = "24-06";</script>
    <head>

        <link rel="stylesheet" href="./styles.css">

        <div class="container">

          <img class="headimg" id="image" src="header.jpeg" />

          <h2 id="text">Date: <script type="text/javascript">document.write(statsDate)</script></h2>

        </div>

        <script type="text/javascript" src="jquery-latest.js"></script> 

        <script type="text/javascript" src="jquery.tablesorter.js"></script> 

        <script>

            $(document).ready(function() { 

            // call the tablesorter plugin 

            $("#res-table").tablesorter(); 

            });

        </script>

    </head>

    <body>

        <table id="res-table">

            <thead>

                <tr>

                    <th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>

                    <th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>

                    <th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>

                    <th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>

                    <th rowspan="2" scope="col"><a href="#" class="sort-by">aaa</th>

                    <th colspan="2">aaa</th>

                    <th colspan="2">aaa</th>

                    <th colspan="2">aaa</th>

                    <th colspan="2">aaa</th>                    

                    <th colspan="2">aaa</th>

                    <th colspan="2">aaa</th>

                    <th colspan="2">aaa</th>

                    <th colspan="2">aaa</th>

                    <th colspan="10">aaa</th>

                </tr>

                <tr>

                    <th>H</th>

                    <th>A</th>

                    <th>H</th>

                    <th>A</th>

                    <th>H</th>

                    <th>A</th>

                    <th>H</th>

                    <th>A</th>

                    <th>H</th>

                    <th>A</th>

                    <th>H</th>

                    <th>A</th>

                    <th>H</th>

                    <th>A</th>

                    <th>H</th>

                    <th>A</th>

                    <th colspan="5">H</th>

                    <th colspan="5">A</th>

                </tr>

            </thead>

            <tbody>

<tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr><tr><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td><td>123</td></tr></tbody>

</table>

</body>

</html>

根据我的理解，这是 CSS 文件:

table, th, td {

    border: 1px solid black;

}



th, td {

    padding: 10px;

    text-align: center;

}



th {

    color: white;

    background-color: #000000;

    font-weight: 400;

}



td {

    color: white;

    background-color: #ababab;

}



tr:hover {

  background-color: white;

}

tr:hover td {

  color: black;

}



td.res_w{

    background-color: #00aa00;

}



td.res_d{

    background-color: #ffb066;

}



td.res_l{

    background-color: #ff0000;

}



td.res_m_w{

    background-color: #00aa00;

    border-style: solid;

    border-left-width: 2px;

    border-left-color: #ababab;

}



td.res_m_d{

    background-color: #ffb066;

    border-style: solid;

    border-left-width: 2px;

    border-left-color: #ababab;

}



td.res_m_l{

    background-color: #ff0000;

    border-style: solid;

    border-left-width: 2px;

    border-left-color: #ababab;

}



#wrap {

    overflow: auto;

    height: 400px;

}


img {
  height: 120px;
}

.cover {
  width: 260px;
  object-fit: cover;
}

div#wrapperHeader div#header {

 width:100%;

 height:300px;

 margin:0 auto;

}



div#wrapperHeader div#header img {

 width:100%;

 height:300px;

 margin:0 auto;

}



*  {

    -moz-box-sizing: border-box;

    -o-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}



body {

    color: white;

    font-size: 1em;

}



a:link,

a:active {

    color: white;

    text-decoration: none;

}



a:link,

a:after {

    color: white;

    text-decoration: none;

}



.container {

  margin: 50px auto;

  padding: 0 50px;

  max-width: 960px;

}



table { 



    border-collapse: collapse;

    width: 100%;  

}



td,

th { 

    padding: 4px; 

    border: 1px solid #CCC;

    overflow: hidden;

    vertical-align: middle;

}



th a,

td a { 

    display: block;

    width: 100%;

}



th a.sort-by { 

    padding-right: 18px;

    position: relative;

}



a.sort-by:before,

a.sort-by:after {

    border: 4px solid transparent;

    content: "";

    display: block;

    height: 0;

    right: 5px;

    top: 50%;

    position: absolute;

    width: 0;

}



a.sort-by:before {

    border-bottom-color: #666;

    margin-top: -9px;

}

a.sort-by:after {

    border-top-color: #666;

    margin-top: 1px;

}



#container {

  height: 400px;

  width: 100%;

  position: relative;

}



#image {

  position: absolute;

  left: 0;

  top: 0;

}



#text {

  z-index: 100;

  position: absolute;

  color: white;

  font-size: 48px;

  font-weight: bold;

  left: 500px;

  top: 30%;

}

请指教。

谢谢

最佳答案

使用Bootstrap为了更好的布局。网站也会响应

关于html - CSS:如何配置图像然后配置表格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44737203/

html - CSS:如何配置图像然后配置表格？

上一篇：css - 拆分背景 50/50

下一篇：javascript - 如何获取JavaScript中媒体查询定义的当前CSS值？