1. 技术文章
  2. How to nest a table within a table?

How to nest a table within a table?

由 陌路散爱 提交于 2020-07-30 03:35:11

问题


I've seen a similar topic, but not for my specific situation. I need to nest a table within the table and it will take up several cells, but when I try to nest a table it deletes the surrounding table at the same time. I included a picture of how it should look after my code and my code is how it looks currently. Can someone explain how this is done? Much appreciated.

/* 
   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>
    &#169;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>

How the table should look


回答1:


You can do something like below and change the CSS as per your need.

<!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>
    &#169;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>

Hope this helps!




回答2:


Nested like this

/* 
   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>
    &#169;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>



回答3:


Do it like this (of course you'll need to fix the font size and styling, and do the other side too. Ok try this. you still need to fix the font sizing

<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;
}


来源：https://stackoverflow.com/questions/43082986/how-to-nest-a-table-within-a-table

标签
html
css
html-table
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!