dushkin
Reputation: 2111
CSS: How to configure an image and afterwards a table?
I have an html file which I'd like it to have a header image, spanning all over the screen width, but to have its original height. And following it a table.
I struggle with the CSS settings. I am getting table overlapping the image and image running out of the screen width I want it to be at the screen width. This is the start of the html file:
<!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>
And this the CSS file according to my understanding:
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%;
}
Please advise.
Thanks
Upvotes: 1
Views: 48
Answers (3)
Sneha Bharti
Reputation: 226
Try the following codes. Here's the 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;
}
Upvotes: 0
Sethumadhavan K
Reputation: 83
Use Bootstrap for better layout. Also website will responsive
Upvotes: 1
Itay Ganor
Reputation: 4205
There's an option to use object-fit: cover; on the image, so you can change only the width property and set object-fit: cover; too. That way the height will be the original height and the image will fill the entire width!
More information on CSS-Tricks.
Upvotes: 0
Related Questions
- Displaying a table over an image with CSS
- How do I add an image beside a table
- Formatting images in CSS div table
- Putting a table ontop of an image using css, html and dreamweaver
- Text and Image in Table HTML /CSS
- Css on html table with 2 columns. (left column contains image, right one contains data about image)
- HTML/CSS Table in front of image
- HTML Table with images
- How to put an image in this table
- Placing Image in HTML Table