【发布时间】：2017-03-29 02:02:01
【问题描述】：
我看过一个类似的话题，但不是针对我的具体情况。我需要在表格中嵌套一个表格，它会占用几个单元格，但是当我尝试嵌套一个表格时，它会同时删除周围的表格。我附上了一张关于它应该如何处理我的代码的图片，而我的代码就是它目前的样子。有人可以解释这是如何完成的吗？非常感谢。
/*
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>【问题讨论】：
-
我不明白你的桌子看起来和图片一模一样？
-
在图片中，您是否看到表格底部附近的一些单元格周围有双边框？那是嵌套在原始表中的表。我必须为这个项目复制它。
标签： html css html-table