HTML CSS Scrollbar
HejJeg forsøger at lave en Horisontal Scrollbar. Baren fremkommer og virker, men den ødelægger min header hvad gør jeg glat ?
på forhånd tak for svarene.
CSS:
table {
border-collapse: separate;
border-spacing: 0;
color: #4a4a4d;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
th,
td {
padding: 10px 15px;
vertical-align: middle;
}
.fixed_header tbody{
display:block;
overflow:auto;
height:200px;
width:600px;
}
.fixed_header thead tr{
display:block;
}
thead {
background: #395870;
background: linear-gradient(#49708f, #293f50);
color: #fff;
font-size: 11px;
text-transform: uppercase;
}
th:first-child {
border-top-left-radius: 5px;
text-align: left;
}
th:last-child {
border-top-right-radius: 5px;
}
tbody tr:nth-child(even) {
background: #f0f0f2;
}
td {
border-bottom: 1px solid #cecfd5;
border-right: 1px solid #cecfd5;
}
td:first-child {
border-left: 1px solid #cecfd5;
}
.book-title {
color: #395870;
display: block;
}
.text-offset {
color: #7c7c80;
font-size: 12px;
}
.item-stock,
.item-qty {
text-align: center;
}
.item-price {
text-align: right;
}
.item-multiple {
display: block;
}
tfoot {
text-align: right;
}
tfoot tr:last-child {
background: #f0f0f2;
color: #395870;
font-weight: bold;
}
tfoot tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
tfoot tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}
.btnEdits {
display: inline-block;
border-radius: 4px;
background-color: #4CAF50;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 16px;
padding: 10px;
width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.btnEdits span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.btnEdits span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.btnEdits:hover span {
padding-right: 25px;
}
.btnEdits:hover span:after {
opacity: 1;
right: 0;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/TableStyle.css">
</head>
<body>
<div>
<table id=table class="fixed_header">
<caption>Design and Front-End Development Books</caption>
<thead>
<tr>
<th scope="col" colspan="1">Item</th>
<th scope="col">Availability</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td id="book-title1">
<strong class="book-title" >Don’t Make Me Think</strong>
<span class="text-offset">by Steve Krug</span>
</td>
<td class="item-stock">In Stock</td>
<td class="item-qty">1</td>
<td class="item-price">$30.02</td>
<td><button name='btnEdit' class='btnEdits' style="vertical-align:middle" onclick="btn1Call(event,'book-title1');"><span>Edit </span></button></td>
</tr>
<tr>
<td id="book-title2">
<strong class="book-title" >A Project Guide to UX Design</strong>
<span class="text-offset">by Russ Unger & Carolyn Chandler</span>
</td>
<td class="item-stock">In Stock</td>
<td class="item-qty">2</td>
<td class="item-price">$52.94 <span class="text-offset item-multiple">$26.47 × 2</span></td>
<td><button name='btnEdit' class='btnEdits' style="vertical-align:middle" onclick="btn1Call(event,'book-title2');"><span>Edit </span></button></td>
</tr>
<tr>
<td id="book-title3">
<strong class="book-title">Introducing HTML5</strong>
<span class="text-offset">by Bruce Lawson & Remy Sharp</span>
</td>
<td class="item-stock">Out of Stock</td>
<td class="item-qty">1</td>
<td class="item-price">$22.23</td>
<td><button name='btnEdit' class='btnEdits' style="vertical-align:middle" onclick="btn1Call(event,'book-title3');"><span>Edit </span></button></td>
</tr>
<tr>
<td id="book-title4">
<strong class="book-title" >Bulletproof Web Design</strong>
<span class="text-offset">by Dan Cederholm</span>
</td>
<td class="item-stock">In Stock</td>
<td class="item-qty">1</td>
<td class="item-price">$30.17</td>
<td><button name='btnEdit' class='btnEdits' style="vertical-align:middle" onclick="btn1Call(event,'book-title4');"><span>Edit </span></button></td>
</tr>
</tbody>
</table>
</div>
<script language="Javascript">
function btn1Call(evt, t) {
var e = document.getElementById(t);
alert(e.innerText);
}
</script>
</body>
</html>
