Question

最后一行应排成2行在Firefox中，表格的边框不显示（仅最后一行）但是在chrome中，它仅显示一行（应该是两行，因为rowspan = 2）
此外，为什么在CSS中进行某些更改后chrome无法直接显示.php文件？（效果）

我包括了我的css代码，而不仅仅是表格的布局和代码

* {
  margin: 0;
  padding: 0;
  font-family: "Palatino Linotype", "Times New Roman", Helvetica, sans-serif;
}


/* Header design */

#header nav {
  /* so when the users scroll the page the menu will be fixed */
  position: fixed;
  width: 100%;
  /*it is like the border to the menu */
  height: 70px;
  /*  */
  background-color: #273746;
  z-index: 3;
}

.webname {
  /* to be at the same row like links */
  line-height: 70px;
  color: white;
  font-family: Verdana, Helvetica, sans-serif;
  font-variant: small-caps;
  margin-left: 30px;
  font-weight: bold;
  letter-spacing: 2px;
  /* z-index:4; */
}

#header ul {
  /* make the menu to the right of the page */
  float: right;
}

#header ul li {
  list-style: none;
  display: inline-block;
  /* the height of the line */
  line-height: 70px;
  /* to make no spaces between the boxes in the menu */
  float: left;
  /* z-index:2; */
}

#header a {
  /* to be able to click the link 
    	even if the mouse is not directly on the text*/
  display: block;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  padding: 0 40px;
  color: #FDFEFE;
}

#header a:hover {
  background-color: #EC7063;
}


/* Header design ends */


/* contents design */

html,
body {
  height: 100%;
}

p {
  color: black;
}

#outer_container {
  height: auto !important;
  height: auto;
  min-height: 100%;
  /* real browsers */
}

#content_container {
  /* insert a descrtiption  */
  width: 1000px;
  margin: 0 auto;
  /*
    	background-image:url('../images/art.jpg');
    	background-repeat:no-repeat;
    	*/
  /* space from the top of the  */
  padding-top: 100px;
  /* scroll bar */
  overflow: auto;
  /* of the whole page*/
  height: auto;
}

.artTable,
th,
td {
  width: 700px;
  border-collapse: collapse;
  border: 1px solid black;
  text-align: center;
  margin: 10px;
}

<div id="content_container">

  <br>
  <table class="artTable">

    <caption>Most Popular Artists in the world</caption>

    <thead>
      <tr>
        <th colspan="2">Full Name</th>
        <th> Type of Art </th>
        <th> Most popular work </th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Van </td>
        <td>Gogh </td>
        <td> Painter</td>
        <td>Starry night</td>
      </tr>

      <tr>
        <td>Colette</td>
        <td> Peters </td>
        <td> Cake designer</td>
        <td>The Art of Cake decorating </td>
      </tr>

      <tr>
        <td>Dennis </td>
        <td> Ritchie</td>
        <td>Programmer </td>
        <td>C (Programming Languange) </td>
      </tr>

      <tr>
        <td rowspan="2" colspan="4">Art Surrounds Us</td>

      </tr>
    </tbody>


  </table>
  <br>
</div>

Answer 1

只需添加边框属性-> <table border="2">CONTENT</table>

Answer 2

最后一行是2行跨度，但该行缩小到内容，看起来只有1行跨度。在最后一行进行此测试，您将看到该行跨度为2行：

<div style="display: table">
  <div style="display: table-row">
    <div style="display: table-cell">
      content1
    </div>
  </div>
  <div style="display: table-row">
    <div style="display: table-cell">
      content2
    </div>
  </div>
</div>

如果您只想增加行的高度，则可以使用以下内容：

  <tr>
    <td rowspan="2" colspan="4">Art Surrounds Us</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>

如何使表格的边框显示？

2 个答案: