CSSに関しては初心者です。私の全体的な目標は、テーブルにデータを表示する小さな Web アプリケーションを CSS を使用するように変換することです。
アプリケーションが表示する内容の説明は、左側のウィンドウに従業員名のリストがあり、右側にはユーザーが選択可能な期間にまたがる従業員が働いた日ごとのセルがあります。
以下のコードでは、ユーザーが右にスクロールできるようにセル要素をオーバーフローさせることができません。代わりに、セルが下にオーバーフローしています。
垂直方向ではなく水平方向にオーバーフローを機能させる方法はありますか?
誰かが助けてくれれば大歓迎です - それは私をイライラさせました!
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header</div>
<div id="centreposition">
<div id="centrecontent">
<?php
for ($counter = 0; $counter < 100; $counter++)
{
?>
<div id="cell">AB</div>
<?php
}
?>
</div>
</div>
<div id="footer">Footer.</div>
<div id="left">Left <div>
</body>
</html>
CSS:
body {
margin: 0px;
}
#header {
height: 100px;
background-color: #9FF300;
}
#centreposition {
width: 600px;
padding-right: 10px;
padding-left: 10%;
}
#centrecontent {
z-index: 100;
min-width: 1px;
height: 40px;
border: 1px solid #999999;
padding: 4px;
background-color: #FFFF00;
overflow-x: scroll;
}
#footer {
padding-left: 175px;
background-color: #20F3F7;
}
#left {
width: 10%;
position: absolute;
top: 100px;
left: 0px;
padding: 10px 0px 10px 6px;
}
#right {
width: 130px;
position: absolute;
top: 100px;
right: 0px;
height: 200px;
}
#cell {
float: left;
width: 24px;
height: 16px;
margin: 1px;
background-color: #aaccdd;
font-size: 10px;
border-style: solid;
border-left-width: 1px;
border-color: #555555;
}