将列标题放在没有边框的列上？

时间：2017-03-28 18:36:31

标签： html css html-table

我需要将列标题放在列上，而不要在它们周围放置边框。理想情况下，该表应该看起来像我在这篇文章中包含的图片，但是它已经被刷了，我不确定为什么，因为我不经常做表。知道出了什么问题吗？任何帮助表示赞赏。 Picture of the table here 

/* 
   CSS for Lounge Project 
   Filename: styles.css
   
   Author:   Justus Self
   Date:     3/21/17
   HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/

/*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;
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
<!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>
        <tbody>
            <tr>
                <td rowspan="2" colspan="2">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">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">Cranberry Antioxidant Blast</td>
                <td colspan="2">20 oz.</td>
                <td colspan="2">$4.75</td>
            </tr>
            <tr>
                <td rowspan="2" colspan="2">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>
        </thead>
    </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>

3 个答案:

答案 0 :(得分：1)

您正在寻找CSS border-collapse属性。从width: 60%;移除td, th声明并添加：

table {
  width: 100%;
  border-collapse: collapse;
}

我还添加了一个.drink-name选择器，以便在左对齐其他表单元格时简化某些表格单元格的居中工作。您可以根据需要随意更改我添加到每个单元格中的padding。

要使列宽度相等，您应该添加：

td[colspan="2"] {
  width: 33.333%;
}

<小时/>

演示片段：

＆＃13;
＆＃13; 
/* 
   CSS for Lounge Project 
   Filename: styles.css
   
   Author:   Justus Self
   Date:     3/21/17
   HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/


/*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;
  width: 100%;
}

td[colspan="2"] {
  width: 33.333%;
}

.drink-name {
  text-align: left;
}
＆＃13; 
<!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" style="border-right:0">Drink</th>
        <th colspan="2" style="border-left:0;border-right:0">Size</th>
        <th colspan="2" style="border-left:0">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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

首先，正确关闭thead和tbody标签，然后在css中添加此代码。这里是jsfiddle：https://jsfiddle.net/ohtduqso/ 

table {
  border-collapse: collapse;
   border: 1px solid black;
}

td,
th {
  border: 1px solid black;
  font-size: 1.3em;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

th {
  border-left: none;
  border-right: none;
}

答案 2 :(得分：0)

https://jsfiddle.net/v86x4ehh/1/

只需将这些类添加到您的css

即可 
table tr:nth-child(2){
  border:none;
  }
table{

  border-collapse:collapse;
  border:1px solid black;
}
相关问题
最新问题