4. feladat

táblázat

by László Kovács

HTML

<div id="container">
    
    <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet diam cursus, ullamcorper arcu sed, elementum lacus. Nunc tortor odio, egestas sed pretium non, aliquam vel odio. Morbi scelerisque tincidunt pretium. Nam in sapien sit amet eros iaculis finibus id quis mauris. Integer dui turpis, tincidunt eget justo in, consectetur luctus orci. Mauris lobortis sodales nulla, in tristique felis vestibulum et. Maecenas non laoreet orci. Vestibulum hendrerit augue ut sollicitudin egestas. Donec rutrum sed urna eget egestas.</p>

    <p>Nulla volutpat sapien eu urna consectetur volutpat. Nullam in ante nunc. Sed varius consequat tincidunt. Nunc non ex eleifend, euismod turpis ut, cursus massa. Suspendisse maximus, nibh ac consequat lobortis, massa diam ornare mi, et scelerisque augue turpis a dolor. Donec ac justo lectus. Pellentesque non condimentum diam. Pellentesque fermentum molestie est, eget aliquam leo gravida id. Suspendisse nec quam id felis porttitor eleifend in in urna. Maecenas rhoncus tempor efficitur. Donec auctor congue metus vitae faucibus. Cras vitae velit sit amet massa dignissim vestibulum. Sed tristique sodales purus, nec feugiat leo malesuada et. Nullam eget bibendum purus. Cras egestas, metus eu hendrerit malesuada, nulla risus suscipit tortor, vel luctus lorem ex non enim.</p>

    <p>Nunc a luctus lectus, ac vulputate neque. Nulla a mauris in mi maximus molestie. Proin varius tellus eu tristique convallis. In hac habitasse platea dictumst. Donec vitae dignissim arcu, sed porttitor felis. Suspendisse non magna dolor. Duis eu turpis a diam consequat ultricies. Vestibulum nec velit sit amet augue ultrices fringilla.</p>

    <p>Curabitur luctus sodales mi et sodales. Nullam feugiat purus et dui eleifend, eget consectetur ante dapibus. Cras scelerisque nisl vitae sapien ultricies tincidunt eu non lacus. Etiam placerat mi vitae purus consequat, et ullamcorper quam venenatis. Suspendisse...

CSS

body{
    background: #FDD167;

}

#container{
     background: #FFFFFF;
     margin: 10px 10px 10px 10px;
     box-shadow:
		inset 10px 0px 10px -7px #000000,
		inset -10px 0px 10px -7px #000000;
}


#content {
        border: 1px solid #aaa;
        /* box-shadow: 0px 0px 2px 2px #4B4B4B; */
        padding-top: 10px; 
        padding-bottom: 10px;
        font: 12px Arial;  
        
}

#content p {
        width: 95%;
        padding-left: 10px;
        padding-right: 10px;
    
}

#content table{
    width: 95%;
    border: 1px solid #000000;
    border-collapse: collapse;
    margin-left: 10px;
    font: 10px Arial; 
}

#content tr{
    height: 25px;
}

#content th,td{
    width: 75px;
    text-align: center;
}
#content th {
   background: #A4A4A4;
}

#content th.masodikoszlop{
    width: auto;
    text-align: left;
}

#content td.name{
    color: #E20074;
    width: auto;
    text-align: left;
    font-weight: bold;
}

#content tr.masodiksor{
    background: #D0D0D0;
}

#content td.checked{
    background-image:...