Tabel inhoudt past niet

djeric · 4 jul 2016

Hallo allemaal.

Mijn tabel inhoudt blijft niet binnen in de tabel staan bij kleine beeld weergave. (zoals op mobiel)
zie voorbeeld: hier

HTML:

<h1>Programma overzicht:</h1>

<table>
        <tr>
		    <td class="eric">Dj Eric</td>
			<td class="jeroen">Dj Jeroen</td>
			<td class="mastiek">Dj Mastiek</td>
			<td class="rolando">Dj Rolando</td>
		    <td class="roel">Dj Blacklight</td>
		</tr>

</table>				
			
       			<div class="content">			

	<h1>▼ week week 27 (04-07-2016 tot 10-07-2016) ▼</h1>
	
     <table>
        <tr class="kop2">
		    <td>Van</td>
			<td>Tot:</td>
            <td>Ma</td>
            <td>Di</td>
            <td>Wo</td>
			<td>Do</td>
            <td>Vr</td>
			<td>Za</td>
			<td>Zo</td>
        </tr>
<!-- live-stream -->
		<tr>
            <td class="start">00:00</td>
			<td class="einde">12:00</td>
<!-- ma --><td ROWSPAN="9">Auto Dj</td>
<!-- di --><td ROWSPAN="8">Auto Dj</td>
<!-- wo --><td ROWSPAN="1">Auto Dj</td>
<!-- do --><td ROWSPAN="10">Auto Dj</td>
<!-- vr --><td ROWSPAN="9">Auto Dj</td>
<!-- za --><td ROWSPAN="3">Auto Dj</td>
<!-- zo --><td ROWSPAN="13">Auto dj</td>
		</tr>
		<tr>
            <td class="start">12:00</td>
			<td class="einde">13:00</td>
<!-- ma -->
<!-- di -->
<!-- wo --><td class="rolando" ROWSPAN="3">Woensdag middag met Dj Rolando</td>
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
		</tr>
		<tr>
            <td class="start">13:00</td>
			<td class="einde">14:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
		</tr>
		<tr>
            <td class="start">14:00</td>
			<td class="einde">15:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za --><td class="roel" ROWSPAN="3">Dj Blacklight saturday's favorite's</td>
<!-- zo -->
		</tr>
		<tr>
            <td class="start">15:00</td>
			<td class="einde">16:00</td>
<!-- ma -->
<!-- di -->
<!-- wo --><td ROWSPAN="9">Auto Dj</td>
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
		</tr>
		<tr>
            <td class="start">16:00</td>
			<td class="einde">17:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
		</tr>
		<tr>
            <td class="start">17:00</td>
			<td class="einde">18:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za --><td ROWSPAN="7">Auto dj</td>
<!-- zo -->
		</tr>
		<tr>
            <td class="start">18:00</td>
			<td class="einde">19:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
		</tr>
		<tr>
            <td class="start">19:00</td>
		    <td class="einde">20:00</td>
<!-- ma -->
<!-- di --><td class="rolando" ROWSPAN="3">De dolle dinsdag</td>
<!-- wo -->
<!-- do -->
<!-- vr -->
<!-- za -->
<!-- zo -->
		</tr>
		<tr>
            <td class="start">20:00</td>
		    <td class="einde">21:00</td>
<!-- ma --><td class="mastiek" ROWSPAN="2">BPM after weekend show</td>
<!-- di -->
<!-- wo -->
<!-- do -->
<!-- vr --><td class="mastiek" ROWSPAN="2">BPM weekend show</td>
<!-- za -->
<!-- zo -->
		</tr>
		<tr>
            <td class="start">21:00</td>
		    <td class="einde">22:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do --><td class="roel" ROWSPAN="2">EDM Avond</td>
<!-- vr -->
<!-- za -->
<!-- zo -->
		</tr>
		<tr>
            <td class="start">22:00</td>
		    <td class="einde">23:00</td>
<!-- ma --><td ROWSPAN="2">Auto Dj</td>
<!-- di --><td ROWSPAN="2">Auto Dj</td>
<!-- wo -->
<!-- do -->
<!-- vr --><td ROWSPAN="2">Auto dj</td>
<!-- za -->
<!-- zo -->
		</tr>
		<tr>
            <td class="start">23:00</td>
		    <td class="einde">00:00</td>
<!-- ma -->
<!-- di -->
<!-- wo -->
<!-- do --><td ROWSPAN="1">Auto dj</td>
<!-- vr -->
<!-- za -->
<!-- zo -->
		</tr>		
    </table>

Code:

* {
    margin: 0;
    padding: 0;
}

body {
font-family: Arial, "sans-serif";
color: black;
font-size: 1em;
background-image: url(../afbeeldingen/back.jpg);
background-size: cover;
} 

h3
{ 
text-align : left; 
color : #0099FF;
font-size: 0.8em;
}


h4 {
    text-align:center;
    color: #cd6600;
    font-size: 1.0em;
    letter-spacing: 0.1em;
    margin: 0 0 0.8em;
    padding: 0;
	padding-top: 1em;
}

h5
{ 
text-align : center; 
color : #0099FF;
font-size: 1.3em;
}

A:link { color: #ffff00; }
A:hover { color: #cccccc; }
A:visited { color: #cccccc; }
A:active { color: #ff0000; }

#websitevak {
width: 100%;
max-width: 1000px;
margin: 1em auto;
border-left: 3px ridge green;
border-right: 3px ridge green;
background-color: yellow;
background-image: -linear-gradient(top, darkblue, lightblue, yellow);
background-image: -webkit-linear-gradient(top, darkblue, lightblue, yellow);
background-image: -moz-linear-gradient(top, darkblue, lightblue, yellow);
background-image: -ms-linear-gradient(top, darkblue, lightblue, yellow);
background-image: -o-linear-gradient(top, darkblue, lightblue, yellow);
}

#balkboven p {
    font-family: georgia,serif;
    font-variant: small-caps;
    padding: 1em;
    text-align: center;
}

#balkboven p a {
    color: linen;
    font-size: 2.5em;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-shadow: 1px 1px 1px black;
}

@media screen and (max-width: 600px) {
#balkboven p a {
    font-size: 1.4em;
}
}

#middenstuk {
    width: 100%;
}

#menu {
background-color: #1e90ff;
background-image: -linear-gradient(left, #104e8be, #1e90ff);
background-image: -webkit-linear-gradient(left, #104e8b, #1e90ff);
background-image: -moz-linear-gradient(left, #104e8b, #1e90ff);
background-image: -ms-linear-gradient(left, #104e8b, #1e90ff);
background-image: -o-linear-gradient(left, #104e8b, #1e90ff);
    font-family: georgia,serif;
    font-variant: small-caps;
    letter-spacing: 0.15em;
    text-align: center;
    width: 100%;
}

#menuknop {
    color: linen;
    display: none;
    height: 20px;
    font-size: 1.1em;
    font-variant: small-caps;
    font-weight: bold;
    padding: 9px 0 9px 0;
    text-align: center;
    text-decoration: none;
}

@media screen and (max-width: 800px) {
#menuknop {
    display: block;
}
}

#menu-icoon {
    display: inline-block;
    width: 22px;
    padding: 0 0.5em 0 0;
    position: relative;
}
 
#menu-icoon span {
    background-color: linen;
    border: .5px solid linen;
    height: 2px;
    margin-top: 2px;
    width: 100%;
    display: block;
}

#menu ul {
    list-style-type: none;
}

#hoofdmenu {
    display: none;
    margin: 0 auto;
    max-width: 900px;
    width: 80%;
}

@media screen and (min-width: 801px) {
#hoofdmenu {
    display: block !important;
}
}

@media screen and (max-width: 800px) {
#hoofdmenu {
    width: 100%;
}
}

#hoofdmenu:after {
    clear: both;
    content: " ";
    display: table;
}

#hoofdmenu > li {
    display: inline-block;
    position: relative;
}

@media screen and (max-width: 800px) {
#hoofdmenu > li {
    border-top: 1px solid linen;
    display: block;
}
}

#hoofdmenu > li > a {
    color: #ffffff; 
    display: block;
    font-size: 1.2em;
    padding: 1em 0 0.8em 1em;
    text-align: left;
    text-decoration: none;
}

#hoofdmenu > li > a:hover {
    color: yellow;
}

@media screen and (max-width: 800px) {
#hoofdmenu > li > a:hover {
    background-color: yellow;
    color: linen;
}
}

#hoofdmenu > li:hover ul {
    display: block;
    position: absolute;
    z-index: 2;
}

@media screen and (max-width: 800px) {
#hoofdmenu > li:hover ul {
    left: 10em;
    top: 0;
}
}

.submenu > ul {
    border-bottom: 1px solid linen;
    border-left: 1px solid linen;
    border-right: 1px solid linen;
    display: none;
}

@media screen and (max-width: 800px) {
.submenu > ul {
    border: 0 none transparent;
}
}

.submenu > ul > li > a {
    background-color: yellow;
    border-top: 1px solid linen;
    color: darkgreen;
    display: block;
    font-size: 1em;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    padding: 0.5em 0 0.5em 2em;
    text-align: left;
    text-decoration: none;
    width: 7em;
}

.submenu > ul > li:first-child a {
    border-top: 0 none transparent;
}

@media screen and (max-width: 800px) {
.submenu > ul > li > a {
    background-color: yellow;
    border-left: 4px solid darkolivegreen;
    border-right: 1px solid linen;
    letter-spacing: 0.1em;
    padding: 1em 0 0.8em 0.5em;
}
}

.submenu > ul > li > a:hover {
    background-color: orange;
}

@media screen and (max-width: 800px) {
.submenu > ul > li > a:hover {
    background-color: orange;
    border-left: 4px solid linen;
}
}

#hoofdvak {
    margin: 1em auto 0;
    max-width: 1000px;
    width: 95%;
}

@media screen and (max-width: 800px) {
#hoofdvak {
    width: 95%;
}
}

#inhoudtekstvak {
    background-image: url(../afbeeldingen/achtergronden.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1.5em;
    min-height: 50vh;
}

#tekstvak p {
    font-size: 0.95em;
    line-height: 1.3em;
    margin-bottom: 1em;
	color: #FFD700;
}

#tekstvak ul, #tekstvak ol {
    font-size: 0.95em;
    line-height: 1.3em;
    margin-bottom: 1em;
    margin-left: 2em;
}

#tekstvak ul li, #tekstvak ol li {
    padding-right: 2em;
    position: relative;
    left: 2em;
}

@media screen and (max-width: 800px) {
#tekstvak ul li, #tekstvak ol li {
    padding-right: 0;
    position: static;
    left: 0;
}
}

#tekstvak h1 {
    text-align:center;
    color: #cd6600;
    font-size: 1.3em;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin: 0 0 0.8em;
    padding: 0;
	padding-top: 1em;
}

#tekstvak h2 {
    color: olivedrab;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-bottom: 0.25em;
    padding-top: 0.25em;
}

#extravak {
    background-color: #003333;
    float: left;
    margin: 1em 1% 1em 0;
    width: 49%;
}

@media screen and (max-width: 800px) {
#extravak {
    float: none;
    margin: 1em 0;
    width: 100%;
}
}

@media screen and (max-width: 800px) {
#extravak:after {
    clear: both;
    content: " ";
    display: table;
}
}

#aanmelding > p {
    font-size: 0.95em;
    line-height: 1.3em;
    margin-bottom: 1em;
	color: #00ff00;
}

.benodigd{
	color: #ffff00;
}

.jarig{
	color: #00FF2B;
}

#aanmelding > li {
	color: #ffff00;
}

#inhoudextravak {
    padding: 1.5em;
}

#inhoudextravak > h3 {
    color: cornflowerblue;
    font-size: 1.1em;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    margin-bottom: 1em;
}

#inhoudextravak > p {
    font-size: 0.95em;
    line-height: 1.3em;
    margin-bottom: 1em;
	color: #00ff00;
}


#inhoudextravak img {
    border: 1px solid linen;
    display: block;
    height: auto;
    max-width: 50%;
}

#inhoudextravak > li {
	color: #ffff00;
}

@media screen and (max-width: 800px) {
#inhoudextravak img {
    display: inline;
    max-width: 30%;
}
}

#socialmediavak {
    background-color: #003333;
    float: left;
    margin: 1em 0 1em 1%;
    width: 49%;
}

@media screen and (max-width: 800px) {
#socialmediavak {
    float: none;
    margin: 1em 0;
    width: 100%;
}
}

#inhoudsocialmediavak {
    padding: 1.5em;
}

#inhoudsocialmediavak > h3 {
    color: cornflowerblue;
    font-size: 1.1em;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    margin-bottom: 1em;
}

#balkbeneden {
    background-color: blue;
    clear: both;
    margin: 0 0 1em;
    width: 100%;
}

@media screen and (max-width: 800px) {
#balkbeneden {
    margin: 0 auto;
    width: 95%;
}
}

#inhoudbalkbeneden {
    padding: 0.8em 0;
    text-align: center;
    width: 100%;
	color: #ffffff;
}

#inhoudbalkbeneden span {
    display: inline-block;
    font-size: 1.0em;
    padding: 0.5em 2em;
    white-space: nowrap;
}

@media screen and (max-width: 800px) {
#inhoudbalkbeneden span {
    padding: 0.25em 0.5em;
}
}

#inhoudbalkbeneden > span > a {
    color: white;
    text-decoration: none;
}

#nowplaying {
    width: 99%;
}

#link p {
    font-size: 0.95em;
    line-height: 1.3em;
    margin-bottom: 1em;
	color: #ffffff;
}

#link ol {
	color: blue;
	font-size: 1em;
}

.team table  { 
width: 100%;
text-align : left; 
border: none;
} 

.team  tr{ 
background: none; 
} 

 .foto  { 
background-color : #000000; 
width: 20%;
} 

 .vraag  { 
background-color : #3366FF; 
color : #00FF7F;
text-align : left; 
padding: 0.5em;
} 
 .antwoord  { 
background-color : #00FF7F; 
color : #3366FF; 
text-align : left; 
padding: 0.5em;
} 

.clearfix:before, .clearfix:after {
    clear: both;
    content: " ";
    display: table;
}

.playersA {
    float: left;
	width : 20%; 
	margin: 0.2em 0.8em 0.6em 0;	
}

.playersB {
    float: right;
	width : 20%; 
	margin: 0.2em 0.8em 0.6em 0;	
}

.links {
    float: left;
    margin: 0.2em 0.8em 0.6em 0;	
}

.rechts  {
    float: right;
    margin: 0.2em 0 0.6em 0.8em;
}

.gecentreerd {
    display: block;
    margin: 0 auto 1em;
	border: none;
}

.socialmedia {
    border: 0 none;
    margin: 0.5em 0.3em;
}

.buttons  { 
list-style : none; 
text-align : center; 
width : 100%; 
} 


table  { 

text-align : center; 

border : black outset 5px;  

table-layout: fixed;

font-weight : bolder; 

font-size : 12px; 

margin : 0 auto; 

width : 100%; 

} 
 tr#kop  { 
 

height : 30px; 

font-size : 1.1em; 

font-weight : bold; 

color : #c0c0c0; 

background : #c30; 
} 
 tr#kop td  { 

width : 350px; 
} 
 tr#kop2  { 

height : 30px; 

font-size : 1.1em; 

font-weight : bold; 

color : #c0c0c0; 

background : #c30; 
} 
 tr#kop2 td  { 
width : 210px; 
} 

.kop1  { 
background : #CC3333; 
}
.kop2  { 
background : #CC3333; 
color : #669999;
font-size : 1.2em; 
} 
.eric  { 

background-color : #FFFF33; 
}

.mastiek  { 

background-color : #FFFFFF; 
}

.roel { 

background-color : #00ff00; 
}

.rolando { 

background-color : #00cc99; 
}

.jeroen { 

background-color : #ff0000; 
}

.duo { 

background-color : #990000;
}

.leerling  { 

background-color : #FF0000; 
}
.start  { 

background-color : #CC3333; 
color : #999966;
font-size : 1.2em; 
} 
.einde  { 

background-color : #CC3333; 
color : #999966;
font-size : 1.2em; 
} 
.testen  { 

background-color : #ff9900; 
} 

 tr  { 
height : 40px; 
background : #996666; 
color : #333333; 
}

.klokje
{ 
text-align : left; 
font-size : 1.0em;
margin-top: 4em;
}

.bestaan
{ 
text-align : right; 
font-size : 1.2em;
margin-top: -1em;
color : #000000;
}


.regelement 
{ 
text-align:left;
color: #cd6600;
background: green;
width: 19%; 
font-size: 0.9em;
margin: 0 0 0.8em;
padding: 0;
float: right; 
}

damnsharp · 20 jul 2016

Hoi, je moet dan bij CSS met media queries gaan werken. Dat betekend dat je bij CSS insteld dat bij een bepaalde schermgrootte een en ander gaat veranderen.
Weet je dan meer?

Ik kan je op weg helpen, even checken of het probleem nog actueel is.

damnsharp · 20 jul 2016

Oh hier staan ook tips: website css tricks

djeric · 22 jul 2016

damnsharp zei:
Oh hier staan ook tips: website css tricks

ok damnsharp, gaan we daar eens mee aan de slag binnen kort.
Super bedankt! :thumb:

Tabel inhoudt past niet

djeric

Gebruiker

damnsharp

Terugkerende gebruiker

damnsharp

Terugkerende gebruiker

djeric

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy