Question

我一直在阅读第一个html和CSS第二版的书，我在Page627上发现表中有意外的垂直显示。谁能告诉我这是什么问题。

这是html和CSS代码：

@font-face {
  font-family: "Emblema One";
  src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}

body {
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: small;
}

h1,
h2 {
  color: #cc6600;
  border-bottom: thin dotted #888888;
}

h1 {
  font-family: "Emblema One", sans-serif;
  font-size: 220%;
}

h2 {
  font-size: 130%;
  font-weight: normal;
}

blockquote {
  font-style: italic;
}

table {
  margin-left: 20px;
  margin-right: 20px;
  border: thin solid black;
  caption-side: bottom;
  border-collapse: collapse;
}

table table th {
  background-color: white;
}

td,
th {
  border: thin dotted gray;
  padding: 5px;
}

th {
  background-color: #cc6600;
}

.cellcolor {
  background-color: #fcba7a;
}

caption {
  font-style: italic;
  padding-top: 8px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

li {
  /* list-style-image: url(images/backpack.gif); */
  padding-top: 5px;
  margin-left: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>My Trip Around the USA on a Segway</title>
  <link type="text/css" rel="stylesheet" href="journal.css">
</head>

<body>

  <h1>Segway'n USA</h1>
  <p>
    Documenting my trip around the US on my very own Segway!
  </p>

  <h2>August 20, 2012</h2>
  <p><img src="images/segway2.jpg" alt="Me any my Segway in New Mexico"></p>
  <p>
    Well I made it 1200 miles already, and I passed through some interesting places on the way:
  </p>

  <table>
    <caption>
      The cities I visited on my Segway'n USA travels
    </caption>
    <tr>
      <th>City</th>
      <th>Date</th>
      <th>Temperature</th>
      <th>Altitude</th>
      <th>Population</th>
      <th>Diner Rating</th>
    </tr>
    <tr>
      <td>Walla Walla, WA</td>
      <td class="center">June 15th</td>
      <td class="center">75</td>
      <td class="right">1,204 ft</td>
      <td class="right">29,686</td>
      <td class="center">4/5</td>
    </tr>
    <tr class="cellcolor">
      <td>Magic City, ID</td>
      <td class="center">June 25th</td>
      <td class="center">74</td>
      <td class="right">5,312 ft</td>
      <td class="right">50</td>
      <td class="center">3/5</td>
    </tr>
    <tr>
      <td>Bountiful, UT</td>
      <td class="center">July 10th</td>
      <td class="center">91</td>
      <td class="right">4,226 ft</td>
      <td class="right">41,173</td>
      <td class="center">4/5</td>
    </tr>
    <tr class="cellcolor">
      <td>Last Chance, CO</td>
      <td class="center">July 23rd</td>
      <td class="center">102</td>
      <td class="right">4,780 ft</td>
      <td class="right">265</td>
      <td class="center">3/5</td>
    </tr>
    <tr>
      <td rowspan="2">Truth or Consequences, NM</td>
      <td class="center">August 9th</td>
      <td class="center">93</td>
      <td rowspan="2" class="right">4,242 ft</td>
      <td rowspan="2" class="right">7,289</td>
      <td class="center">5/5</td>
    </tr>
    <tr>
      <td class="center">August 27th</td>
      <td class="center">98</td>
      <td class="center">
        <table>
          <tr>
            <th>Tess</th>
            <td>5/5</td>
          </tr>
          <tr>
            <th>Tony</th>
            <td>4/5</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr class="cellcolor">
      <td>Why, AZ</td>
      <td class="center">August 18th</td>
      <td class="center">104</td>
      <td class="right">860 ft</td>
      <td class="right">480</td>
      <td class="center">3/5</td>
    </tr>
  </table>

  <h2>July 14, 2012</h2>
  <p>
    I saw some Burma Shave style signs on the side of the road today:
  </p>
  <blockquote>
    <p>
      Passing cars, <br> When you can't see, <br> May get you, <br> A glimpse, <br> Of eternity. <br>
    </p>
  </blockquote>
  <p>
    I definitely won't be passing any cars.
  </p>

  <h2>June 2, 2012</h2>
  <p><img src="images/segway1.jpg" alt="The first day of the trip"></p>
  <p>
    My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me:
  </p>
  <ul>
    <li>cellphone</li>
    <li>iPod</li>
    <li>digital camera</li>
    <li>and a protein bar</li>
  </ul>
  <p>
    Just the essentials. As Lao Tzu would have said, <q>A journey of a 
      thousand miles begins with one Segway.</q>
  </p>
  <!--
	<p>
	  To do list:
	</p>
	<ul>
	  <li>Charge Segway</li>
	  <li>Pack for trip
		<ul>
		<li>cellphone</li>
		<li>iPod</li>
		<li>digital camera</li>
		<li>a protein bar</li>
		</ul>
	  </li>
	</ul>
-->
</body>

</html>

首先是html和css第2版p627意想不到的垂直边框

0 个答案: