Scrollbalken leider nicht ausserhalb der Tabelle

Hallo zusammen,

leider habe ich bei meiner Tabelle den Scrollbalken innerhalb statt ausserhalb der Tabelle und ich bekomme es einfach nicht gelösst das dieser sich nach aussen setzt.

Hier zu sehen: Scripts im Einzelnen

Hier der Quellcode:
[SPOILER]

<html>
<head>
<title>Scripts im Einzelnen</title>
<img src="http://www.bbo-almanach.de/Test/bannerhomepage.jpg" alt="TestBanner"style="display: block;margin: 0px auto;" />
<style type="text/css"> 
    .unterstrich {text-decoration: underline;}
  </style> 
</head>
<body bgcolor="#000000">

<style>
body {
    color: white;
	margin: auto;
	-webkit-border-radius: 5px;
	border: 1px solid #333;
	text-align: center;
}
h1 {
    color: white;
	text-align: center;
}
h2 {
    color: white;
	text-align: center;
}
head:first-child+body thead[class].fixedHeader tr {
    display: block;
}
head:first-child+body tbody[class].scrollContent {
    display: block;
    height: 300px;
    overflow: auto;
}
head:first-child+body thead[class].fixedHeader th {
    width: 480px
}
 
head:first-child+body thead[class].fixedHeader th + th {
    width: 100px
}
 
head:first-child+body thead[class].fixedHeader th + th + th {
   
    width: 150px
}

head:first-child+body thead[class].fixedHeader th + th + th + th {
   
    width: 110px
}
 
head:first-child+body tbody[class].scrollContent td {
    width: 480px
}
 
head:first-child+body tbody[class].scrollContent td + td {
    width: 100px
}
 
head:first-child+body tbody[class].scrollContent td + td + td {
   
    width: 130px
}

head:first-child+body tbody[class].scrollContent td + td + td + td {
   
    width: 110px
}

td {
	text-align: left;
}

th {
	text-align: center;
	color: red;
}

.normal { 
    color:white; background-color:black; 
}
.spezial { 
    color:red; background-color:black; cursor:pointer; 
}

b {
	color: red;
}

</style>

<h1 class="unterstrich"><style="font-family:'Arial'; font-weight: bold;">Alle Scripts im einzelnen</h1>

<div align="center">
    <table class="scrollContent" border="4" bordercolordark="black" bordercolorlight="red">
        <thead class="fixedHeader">
            <tr><th>Script Name</th><th>Version</th><th>Beschreibung</th><th>Download</th></tr>
        </thead>
        <tbody class="scrollContent">
 
            <tr><td>BaseInfo</td>
			    <td>3.2.8</td>
				<td class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.open(href='http://bbo-almanach.de/Test/testen2.html');">ReadMe</td>
				<td class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.open(href='http://bbo-almanach.de/Test/testen2.html');">DownloadNow</td></tr>
            <tr><td>C&C MHTools Tiberium Alliances Available Loot Summary + Info</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
 
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
 
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
 
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td><td>Data</td></tr>
        </tbody>
 
    </table>
</div>


<h2 class="unterstrich"><style="font-family:'Arial'; font-weight: bold;">In order to run these scripts you must first install a userscript manager extension/addon for your browser.</h2>
<form>
<li><b><font size="5.5">Chrome:</font></b>   <b class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.open(href='https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo');"><font size="4.5">Install Tampermonkey klick here</font></b>
<li><b><font size="5.5">Firefox:</font></b>   <b class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.open(href='https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/');"><font size="4.5">Install Greasemonkey klick here</font></b>
</form>

</body>
</html>

[/SPOILER]

Ich hoffe das mir jemand von euch dabei helfen kann dieses Problem zu beheben.

Lg Ghostleader aka Alex

Guck mal hier hat das jemand gelöst:

…oder sollte der Tabellenkopf fixiert sein?

Hallo L-ectron-X,

ja quasi so wie sie jetzt ist ist sie super nur der Balken soll halt raus weil es ja die letzte Spalte sonst verschiebt wie man sieht und das ist mist :frowning: .
Ja mit fixiertem Tabellenkopf soll sie sein.

Lg Ghostleader aka Alex

Dann sollte doch der 2. Link (zu “Stack Overflow”) helfen, oder?