Avatar billede keepy Seniormester
14. august 2018 - 15:12 Der er 8 kommentarer og
1 løsning

HTML CSS Scrollbar

Hej

Jeg 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&#8217;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 &#38; 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 &#215; 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 &#38; 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>
Avatar billede keysersoze Guru
14. august 2018 - 15:13 #1
Har du ikke et link i stedet?
Avatar billede keepy Seniormester
14. august 2018 - 15:20 #2
Avatar billede keysersoze Guru
14. august 2018 - 17:09 #3
Tænkte nu mere til et sted hvor det kan ses live.
Avatar billede keepy Seniormester
15. august 2018 - 07:33 #4
nej desværre
Avatar billede keepy Seniormester
15. august 2018 - 11:47 #5
Her er det muligt at se og prøve

http://cssdeck.com/labs/uzcv4w1u
Avatar billede keysersoze Guru
15. august 2018 - 13:35 #6
På hvilket måde bliver headeren så ødelagt?
Avatar billede keepy Seniormester
15. august 2018 - 15:03 #7
Hvis man sletter følgende fra CSS filen, så skulle headeren passe, afrundede hjørner og header tekst ud for de rigtige kolonner.

http://cssdeck.com/labs/8chbqdu7


.fixed_header tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:600px;
}
.fixed_header thead tr{
  display:block;
}
Avatar billede keysersoze Guru
17. august 2018 - 09:29 #8
Jeg har desværre ikke selv en løsning men måske du kan finde inspiration på nogle af de utallige forsøg på stackoverflow - fx https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody eller https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll/23989771
Avatar billede keepy Seniormester
17. august 2018 - 14:05 #9
Tak for svarene

Jeg lavede min egen løsning, hvor jeg laver to tabeller en for header og en for body, og laver scroll i div tagget for bodyen, dette har så den ulæmpe at kollonerne ikke kan auto scale de skal være faste.

<div >
    <table id=table  >
                <caption>Design and Front-End Development Books</caption>
                <thead>
                    <tr>
                        <th scope="col" colspan="1" style="width: 185px;">Item</th>
                        <th scope="col" style="width: 100px;">Availability</th>
                        <th scope="col" style="width: 50px;">Qty</th>
                        <th scope="col" style="width: 100px;">Price</th>
                        <th scope="col" style="width: 100px;">Edit</th>
                    </tr>
                </thead>
                </table>
                <div style=" overflow: auto;width: 685px;height: 200px;">
                <table >
                <tbody>
                    <tr>
                        <td id="book-title1" style="width: 200px;">
                            <strong class="book-title" >Don&#8217;t Make Me Think</strong>
                            <span class="text-offset">by Steve Krug</span>
                        </td>
                        <td class="item-stock" style="width: 100px;">In Stock</td>
                        <td class="item-qty" style="width: 50px;">1</td>
                        <td class="item-price" style="width: 100px;">$30.02</td>
                        <td style="width: 100px;"><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 &#38; 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 &#215; 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 &#38; 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>
</div>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester