因此，对于我的作业，我必须使用CSS媒体查询来显示两个网页，具体取决于窗口的大小。我已经完成了，但对于手机版本，我必须用菜单替换菜单页面上的表格，其中描述了菜单。我如何在CSS中执行此操作？
@media screen and (min-width: 37.5em) and (max-width: 64em){
header{
padding-top: 1em;
}
main{
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-left: 1em;
padding-right: 1em;
font-size: 90%;
}
h1{
font-size: 1.5em;
}
nav li{
display: block;
margin: 0;
border-bottom: 1px solid #FFE4C4;
}
nav li::first-line{
border-top: 1px solid #FFE4C4
}
nav a{
display: block;
}
#wrapper img{
background-image: none;
height: 0;
}
table{
display: none;
}
#address{
color: #191970;
font-size: 92%;
font-family: Calibri;
background-image: none;
border-color: #FFE4C4;
border-radius: 2px;
border-style: none;
width: 200px;
margin-top: 50px;
}
table.Coffees:after{
content: "Our Coffees";
content: "Our coffees are well-known throughout the region as bold and flavorful. We offer many different types of coffees, one of which is sure to satisfy your taste. Prices start at $2.00 per cup."
}
table.Tea:after{
content: "Our Teas";
content: "Our teas are hand-selected from around the world to bring you a wide variety of possibilities. We specialize in flavorful afternoon teas as well as a wide assortmentof exotic teas. Stop in and try a cup! Prices start $2.00 per cup."
}
table.Snacks:after{
content: "Our Snacks";
content: "We offer a wide variety of foods ranging from simple snacks to complete inners. Our specialties are organic salads and fresh seafood. Try our fried clam strips and fish strips. The locals swear these are the bestq you'll find anywhere. Prices are seasonal, but always a real deal."
}
}
这就是我的CSS文件的那部分。我听说内容属性是一种方法，但我什么都看不到。
提前谢谢！
根据要求，这里分别是索引页面和菜单页面的html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Lighthouse Bistro</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="bistro.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Lighthouse Bistro</h1>
</header>
<nav>
<ul>
<li class="navlist">
<a href="index.html">Home</a>
</li>
<li class="navlist">
<a href="menu.html">Our Menu</a>
</li>
<li class="navlist">
<a href="">Entertainment Schedule</a>
</li>
<li class="navlist">
<a href="">Reservations</a>
</li>
</ul>
<div id="address">
The Lighthouse Bistro
<br>
#27 Lighthouse Road
<br>
Mackinac City, Michigan 49701
<br>
<br>
888-555-5555
<br>
</div>
</nav>
<div role="main">
<img src="images/oldmackinaclight.jpg" alt="Old Mackinac Light" height="350" width="250">
<h3>Enjoy Fine Dining and Entertainment at Lighthouse Point</h3>
<p>The Lighthouse Bistro offers fine dining and entertainment a stones throw from the Old Mackinac Point Lighthouse on the
Straits of Mackinac. The lighthouse was built in 1892 as a sentinel for vessels entering the Straits of Mackinac. Open year
round. Yes, even in the winter! Stop in for a mug of one of our specialty coffees after your hike.</p>
<ul>
<li>Speciality coffees and teas</li>
<li>Bagels, Muffins, and Organic Snack</li>
<li>Clam Strips, Oysters, and Fresh Fish served daily</li>
<li>Music and Poetry Readings</li>
<li>Open Mic Night Every Friday starting at 8:00pm</li>
</ul>
</div>
<footer>
<br>
<em>Copyright © 2018 The Lighthouse Bistro</em>
<br>
<em><a href="/Email/">ourfirstname@yourlastname.com</a></em>
</footer>
</div>
</body>
</html>
这是菜单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Lighthouse Bistro</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="bistro.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>The Lighthouse Bistro</h1>
</header>
<nav>
<ul>
<li class="navlist">
<a href="index.html">Home</a>
</li>
<li class="navlist">
<a href="menu.html">Our Menu</a>
</li>
<li class="navlist">
<a href="">Entertainment Schedule</a>
</li>
<li class="navlist">
<a href="">Reservations</a>
</li>
</ul>
<div id="address">
The Lighthouse Bistro
<br>
#27 Lighthouse Road
<br>
Mackinac City, Michigan 49701
<br>
<br>
888-555-5555
<br>
</div>
</nav>
<div role="main">
<table class="Coffees">
<caption>Some of Our Coffees</caption>
<tr>
<th id="Coffee">Coffee</th>
<th id="Desc1">Description</th>
<th id="Price1">Price</th>
<th id="Image1">Image</th>
</tr>
<tr>
<td headers="Coffee" class="center">Just Java</td>
<td headers="Desc1">The regular house blend, decaffinated coffee, or the flavor of the day</td>
<td headers="Price1" class="center">Endless cup $2.00</td>
<td headers="Image1" class="center"><img src="images/coffee1.jpg" alt="coffee1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Coffee" class="center">Cafe au Lait</td>
<td headers="Desc1">House blended coffee infused into a smooth steamed milk.</td>
<td headers="Price1" class="center">Single $2.00, Double $3.00</td>
<td headers="Image1" class="center"><img src="images/coffee2.jpg" alt="coffee2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Coffee" class="center">Iced Cappucino</td>
<td headers="Desc1">Sweetened espresso blended with icy-cold milk and served in a chilled glass</td>
<td headers="Price1" class="center">Single $4.75, Double $5.75, Wow! $7.75</td>
<td headers="Image1" class="center"><img src="images/coffee3.jpg" alt="coffee3" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Coffee" class="center">Espresso</td>
<td headers="Desc1">Our house blend espresso - the best!</td>
<td headers="Price1" class="center">Single $5.00, Double $7.50</td>
<td headers="Image1" class="center"><img src="images/espresso1.png" alt="espresso" width="100" height="75"></td>
</tr>
</table class="Teas">
<br>
<table>
<caption>Some of Our Teas</caption>
<tr>
<th id="Tea" scope="col">Tea</th>
<th id="Desc2" scope="col">Description</th>
<th id="Price2" scope="col">Price</th>
<th id="Image2" scope="col">Image</th>
</tr>
<tr>
<td headers="Tea" class="center">Breakfast Teas</td>
<td headers="Desc2">Darjeeling, English Breakfast, Queen Anne, Green tea with lemon</td>
<td headers="Price2" class="center">Endless cup $2.00</td>
<td headers="Image2" class="center"><img src="images/tea1.jpg" alt="tea1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Tea" class="center">Afternoon Teas</td>
<td headers="Desc2">Lemon, Pure Peppermint, Earl Grey, China Oolong</td>
<td headers="Price2" class="center">Endless cup $3.00</td>
<td headers="Image2" class="center"><img src="images/tea2.jpg" alt="tea2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Tea" class="center">Exotic Teas</td>
<td headers="Desc2">Orange & Cinnammon Spice, Camomile, Honey & Vanilla, Pomegranate & Raspberry</td>
<td headers="Price2" class="center">Single cup $3.50</td>
<td headers="Image2" class="center"><img src="images/tea3.jpg" alt="tea3" width="100" height="75"></td>
</tr>
</table>
<br>
<table class="Snacks">
<caption>Snacks</caption>
<tr>
<th id="Snack">Snack</th>
<th id="Desc3">Description</th>
<th id="Price3">Price</th>
<th id="Image3">Image</th>
</tr>
<tr>
<td headers="Snack" class="center">Bagels and Muffins</td>
<td headers="Desc3">Bagels, Plain muffins, Blueberry muffins, Chocolate muffins, and much more</td>
<td headers="Price3" class="center">Small $2.00, Large $3.00</td>
<td headers="Image3" class="center"><img src="images/muffin1.jpg" alt="muffin1" width="100" height="75"></td>
</tr>
<tr class="secrow">
<td headers="Snack" class="center">Organic Snacks</td>
<td headers="Desc3">Organic chips with sea salt, Organic salads</td>
<td headers="Price3" class="center">Prices vary</td>
<td headers="Image3" class="center"><img src="images/salad1.jpg" alt="muffin2" width="100" height="75"></td>
</tr>
<tr>
<td headers="Snack" class="center">Fresh Fish</td>
<td headers="Desc3">Clam strips, Fried Fish Strips, Fried Oysters, and many other seasonal selections</td>
<td headers="Price3" class="center">Prices vary by season $5.75-$15.75</td>
<td headers="Image3" class="center"><img src="images/clamstrips.png" alt="muffin3" width="100" height="75"></td>
</tr>
</table>
</div>
<br>
<footer>
<em>Copyright © 2018 The Lighthouse Bistro</em>
<br>
<em><a href="/Email/">yourfirstname@yourlastname.com</a></em>
</footer>
</div>
</body>
</html>