我有一个html文件,我希望它具有标题图像,横跨整个屏幕宽度,但要具有其原始高度。
 然后是一张桌子。

我在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%;

}


请指教。

谢谢

最佳答案

尝试以下代码。这是Codepen

HTML:

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


        <link rel="stylesheet" href="./styles.css">
   </head>
<body>
        <div class="container">

          <img src="http://images.all-free-download.com/images/graphiclarge/beautiful_scenery_05_hd_picture_166257.jpg" />

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

        </div>


        <table id="res-table">



                <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>



            <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:

    body {
  font-size: 1em;
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
  height: 100%;
}
table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 10px;

  text-align: center;
}

th {

  background-color: #000000;

  font-weight: 400;
}

td {

  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;
}

td.res_m_d {
  background-color: #ffb066;

  border-left-width: 2px;

  border-left-color: #ababab;
}

td.res_m_l {
  background-color: #ff0000;

  border-style: solid;
}

#wrap {
  overflow: auto;
}



.cover {
  width: 260px;

}

* {
  -moz-box-sizing: border-box;

  -o-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;
}



a:link, a:active {
  color: white;

  text-decoration: none;
}

a:link, a:after {
  color: white;

  text-decoration: none;
}

table {
  border-collapse: collapse;

  width: 100%;
}

td, th {
  padding: 4px;

  border: 1px solid #CCC;

  overflow: hidden;
}

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;



  width: 0;
}

a.sort-by:before {
  border-bottom-color: #666;
}

a.sort-by:after {
  border-top-color: #666;
}

07-24 09:48
查看更多