как сделать, чтобы граница таблицы отображалась?

#html #css

#HTML #css

Вопрос:

  1. последняя строка должна иметь ширину строки на 2, граница таблицы не отображается (только последняя строка) в Firefox, но в chrome отображается только одна строка (их должно быть две, потому что rowspan = 2)

  2. кроме того, почему chrome не отображает файлы .php непосредственно после внесения некоторых изменений в css? (эффекты)

я включил свой 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>  

Ответ №1:

просто добавьте свойство border-> <table border="2">CONTENT</table>

Ответ №2:

Последняя строка имеет 2 rowspan, но строка сжимается до содержимого и выглядит как всего 1 rowspan. Проведите этот тест в последней строке, и вы увидите, что строка имеет ширину в 2 строки:

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

Если вы просто хотите увеличить высоту строки, вы можете использовать что-то вроде этого:

   <tr>
    <td colspan="4" style="height: 3em ">Art Surrounds Us</td>
  </tr>
  

Комментарии:

1. спасибо, чувак, я решил это!! но большое спасибо за ваше время, я ценю это

2. и одно замечание, ваш первый код неверен, и еще раз спасибо