プログラミングを学んでいる学生です。テーブル CSS で何も機能しない理由がわかりません。横にスクロールしなくてもすべてが画面に収まるように、セルを縮小しようとしています。これが私のhtmlコードです。また、問題があれば Aptana Studio 3 をエディターとして使用しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="MainCSS.css">
<link rel="stylesheet" href="IndexTableCSS.css">
<title>Noah's Ark Pet Sanctuary</title>
</head>
<body>
<header id="header">
<img src="SanctuaryHeader.jpg">
</header>
<nav>
<ul>
<li><a href="santuary.html">ANIMAL SANCTUARY</a>
<ul>
<li><a href="hospital.html">ANIMAL HOSPITAL</a></li>
</ul>
</li>
<li> <a href="adoptDOG.html">ADOPTION CENTER</a>
<ul>
<li><a href="petHelth.html">PET HEALTH CARE</a></li>
<li><a href="petTraining.html">TRAINING TIPS</a></li>
</ul>
</li>
<li><a href="donations.html">DONATIONS</a>
<ul>
<li><a href="volteering.html">VOLUNTEERING</a></li>
</ul>
</li>
<li><a href="store.html">OUR STORE</a></li>
<li><a href="newsEvents.html">NEWS & EVENTS</a></li>
</ul>
</nav>
<br>
<br>
<table id="SanctuaryTable">
<tr>
<td><img src="mural.jpg"></td>
<td><img src="santary.jpg"></td>
</tr>
<tr>
<td>Noah's Ark Pet Sanctuary was founded and incorporated as an Illinois Non-Profit corporation in 1978
by a small group of residents who care about animals. One of our goals is to educate the public on
the proper care and population control of domestic dogs and cats<br>
<br>
<strong>What we do</strong>
<br>
Noah's Ark takes in adoptable cats and dogs from Rockford and the surrounding area.
Once at the sanctuary they receive proper medical care and are put up for adoption into qualified homes for a nominal fee
<br>
<br>
<img src="dogSit.jpg">
</td>
<td>
Noah's Ark Animal Sanctuary
<br>
111 North First Street
<br>
Rockford IL 61107
<br>
<br>
<strong>Hours</strong>
<br>
Mon - Tue - Thurs - Fri 9:30 am - 5:00 pm
<br>
<br>
Wed 9:30 am 3:30 pm
<br>
<br>
Sat 9:30 am - 3:00 pm
<br>
<br>
<br>
<br>
<br>
<br>
<img src="CatPlay.jpg">
</td>
</tr>
<tr>
<td><img src="ArkFooter.jpg"></td>
</tr>
</table>
</body>
</html>
ここに私の IndexTableCSS があります:
#SanctuaryTable
{
border-collapse:collapse;
word-wrap:break-word ;
width: 500px;
}
.small
{
width: 50%;
}
MainCSS ファイルを調べたところ、他の CSS に干渉するものは何もありませんでしたが、そのコードも次のとおりです。
body
{
font-family: Arial, Verdana, sans-serif;
margin-left: 40px;
}
ul
{
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li
{
display: block;
position: relative;
float: left;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #3b3b3b;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
font-size: 11px;
}
li:hover a
{
background: #3b3b3b;
}
li:hover li a:hover
{
background: #1e7c9a;
}