我看过类似的话题，但不是因为我的具体情况。我需要在表中嵌套一个表，它将占用几个单元格，但是当我尝试嵌套表时，它会同时删除周围的表。我提供了一张图片，说明它应该如何照顾我的代码，我的代码是它当前的样子。有人能解释一下这是怎么做到的吗？非常感谢。
/*
CSS for Lounge Project
Filename: styles.css
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/
/*Reset Styles*/
html, body{
font-size: 14px;
width: 100%;
}
a, body, footer, header, h1, h2, h3, img, li, nav, p, ul, table, tbody, td, tfoot, th, thead, tr{
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
/*Drink font colors*/
h2.green {
color: green;
}
h2.blue {
color: blue;
}
h2.purple {
color: purple;
}
h2.red {
color: red;
}
h2.yellow {
color: gold;
}
/*center and border image*/
img.smlounge {
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: red;
}
/*Table styles*/
td, th {
border: 1px solid black;
font-size: 1.3em;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0 1em ;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
td[colspan="2"] {
width: 20%;
}
.drink-name {
text-align: left;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Head First Lounge Elixirs</title>
<!--
Elixir page for Lounge Project
Filename: elixir.html
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
-->
<link type="text/css" rel="stylesheet" href="../lounge.css" />
</head>
<body>
<h1>Our Elixirs</h1>
<h2 class="green">Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
</p>
<hr/>
<h2 class="blue">Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
</p>
<hr/>
<h2 class="purple">Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
</p>
<hr/>
<h2 class="red">Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
</p>
<hr/>
<h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
<p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
and all night.
</p>
<hr/>
<br/>
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2">Drink</th>
<th colspan="2">Size</th>
<th colspan="2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
<td>Iced</td>
<td>16 oz.</td>
<td>$3.75</td>
</tr>
<tr>
<td>Frozen</td>
<td>20 oz.</td>
<td>$4.75</td>
</tr>
</tbody>
</table>
<p><a href="../lounge.html">Back to the Lounge</a></p>
<footer>
©2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
</footer>
</body>
</html>
答案 0 :(得分：1)
像这样嵌套
/*
CSS for Lounge Project
Filename: styles.css
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/
/*Reset Styles*/
html,
body {
font-size: 14px;
width: 100%;
}
a,
body,
footer,
header,
h1,
h2,
h3,
img,
li,
nav,
p,
ul,
table,
tbody,
td,
tfoot,
th,
thead,
tr {
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
/*Drink font colors*/
h2.green {
color: green;
}
h2.blue {
color: blue;
}
h2.purple {
color: purple;
}
h2.red {
color: red;
}
h2.yellow {
color: gold;
}
/*center and border image*/
img.smlounge {
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: red;
}
/*Table styles*/
td,
th {
border: 1px solid black;
font-size: 1.3em;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0 1em;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
td[colspan="2"] {
width: 20%;
}
.drink-name {
text-align: left;
}
.mintable {
border-collapse: initial;
font-size: 0.9em;
}
tbody {
border: solid black 1px
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Head First Lounge Elixirs</title>
<!--
Elixir page for Lounge Project
Filename: elixir.html
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
-->
<link type="text/css" rel="stylesheet" href="../lounge.css" />
</head>
<body>
<h1>Our Elixirs</h1>
<h2 class="green">Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
</p>
<hr/>
<h2 class="blue">Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
</p>
<hr/>
<h2 class="purple">Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
</p>
<hr/>
<h2 class="red">Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
</p>
<hr/>
<h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
<p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
and all night.
</p>
<hr/>
<br/>
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2">Drink</th>
<th colspan="2">Size</th>
<th colspan="2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
<td rowspan="2" colspan="2">
<table class="mintable">
<tr>
<td>Iced</td>
<td>16 oz.</td>
</tr>
<tr>
<td>Frozen</td>
<td>20 oz.</td>
</tr>
</table>
</td>
<td>
<table class="mintable">
<tr rowspan="2" colspan="2">
<td>$4.75</td>
</tr>
<tr>
<td>$3.75</td>
</tr>
</table>
</td>
</tr>
<td></td>
</tbody>
</table>
<br>
<p><a href="../lounge.html">Back to the Lounge</a></p>
<footer>
©2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
</footer>
</body>
</html>
答案 1 :(得分：0)
您可以执行以下操作，并根据需要更改CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Head First Lounge Elixirs</title>
<!--
Elixir page for Lounge Project
Filename: elixir.html
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
-->
<link type="text/css" rel="stylesheet" href="../lounge.css" />
</head>
<body>
<h1>Our Elixirs</h1>
<h2 class="green">Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
</p>
<hr/>
<h2 class="blue">Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
</p>
<hr/>
<h2 class="purple">Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
</p>
<hr/>
<h2 class="red">Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
</p>
<hr/>
<h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
<p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
and all night.
</p>
<hr/>
<br/>
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2">Drink</th>
<th colspan="2">Size</th>
<th colspan="2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
<td colspan="2">
<table>
<tr>
<td>Iced</td>
<td>16 oz.</td>
</tr>
<tr>
<td>Frozen</td>
<td>20 oz.</td>
</tr>
</table>
</td>
<td colspan="2">
<table>
<tr>
<td>$3.75</td>
</tr>
<tr>
<td>$4.75</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<p><a href="../lounge.html">Back to the Lounge</a></p>
<footer>
©2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
</footer>
</body>
</html>
希望这有帮助！
答案 2 :(得分：0)
这样做（当然你需要修复字体大小和样式，并做另一面。好试试这个。你还需要修复字体大小
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2">Drink</th>
<th colspan="2">Size</th>
<th colspan="2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
<td colspan="2" rowspan="2" class="nested">
<table>
<tbody>
<tr><td>Iced</td><td>16 oz</td></tr>
<tr><td>Frozen</td><td>20 oz</td></tr>
</tbody>
</table>
</td>
<td>$3.75</td>
</tr>
<tr>
<td>$4.75</td>
</tr>
</tbody>
/*
CSS for Lounge Project
Filename: styles.css
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/
/*Reset Styles*/
html, body{
font-size: 14px;
width: 100%;
}
a, body, footer, header, h1, h2, h3, img, li, nav, p, ul, table, tbody, td, tfoot, th, thead, tr{
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
/*Drink font colors*/
h2.green {
color: green;
}
h2.blue {
color: blue;
}
h2.purple {
color: purple;
}
h2.red {
color: red;
}
h2.yellow {
color: gold;
}
/*center and border image*/
img.smlounge {
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: red;
}
/*Table styles*/
td, th, td td {
border: 1px solid black;
font-size: 1.3em;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0 1em ;
}
table {
border-collapse: collapse;
margin: 0 auto;
width:100%
}
table table{
margin:1%;
width:98%;
}
table table td{
width:50%;
}
table table tr, table table tbody{
width:100%
}
.nested{padding:0;}
td[colspan="2"] {
width: 20%;
}
.drink-name {
text-align: left;
}