嵌套表实现

Question

我在创建具有“异常”结构的表时遇到问题。

这里是我到目前为止

了，但我需要的“描述”表头是相同的大小与上述（类型，年份，地点，邮编）元素和“价格“应该恰好在”日期“之下，所以我正在考虑嵌套表解决方案。

这里是我的html和fiddle

<table border="1"> 
    <tr> 
     <td class="category"> 
      Picture 
     </td> 
     <td> 
      <table class="ad-header" style="text-align: left;"> 
       <tr> 
        <th>Type</th> 
        <th>Year</th> 
        <th>Location</th> 
        <th>Postcode</th> 
        <th>Date</th> 
       </tr> 
       <tr> 
        <td>Volkswagen Passat Variant</td> 
        <td>2017</td> 
        <td>Uusimaa - Kerava</td> 
        <td>02650</td> 
        <td>15.12.2017</td> 
       </tr> 
      </table> 
      <table class="ad-content" style="text-align: left;"> 
       <tr> 
        <th>Description</th> 
        <th>Price </th> 
       </tr> 
       <tr> 
        <td> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum delectus accusantium mollitia iste numquam, enim asperiores, doloribus sunt aliquam quisquam veniam. Dolores aliquam similique nihil harum, voluptates! Ea, voluptas, veritatis! 
        </td> 
        <td> 
         450€ 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

Answer 1

重构你的表，使类型，年份，位置，邮编，日期，描述和价格在同一个表中，但后两个在一个单独的行。您在说明中使用<th colspan="4">和<td colspan="4">作为表格单元格。见证明的概念例如：

<table border="1"> 
 
    <tr> 
 
    <td> 
 
     Picture 
 
    </td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <th>Type</th> 
 
      <th>Year</th> 
 
      <th>Location</th> 
 
      <th>Postcode</th> 
 
      <th>Date</th> 
 
     </tr> 
 
     <tr> 
 
      <td>Volkswagen Passat Variant</td> 
 
      <td>2017</td> 
 
      <td>Uusimaa - Kerava</td> 
 
      <td>02650</td> 
 
      <td>15.12.2017</td> 
 
     </tr> 
 
     <tr> 
 
      <th colspan="4">Description</th> 
 
      <th>Price </th> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="4"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum delectus accusantium mollitia iste numquam, enim asperiores, doloribus sunt aliquam quisquam veniam. Dolores aliquam similique nihil harum, voluptates! Ea, voluptas, veritatis! 
 
      </td> 
 
      <td> 
 
      450€ 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

你需要使用合并单元格。检查这个链接：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan

Answer 3

<table border="1"> 
    <tr> 
     <td rowspan="4" class="category">Picture</td> 
     <td>Type</td> 
     <td>Year</td> 
     <td>Location</td> 
     <td>Postcode</td> 
     <td>Date</td> 
    </tr> 
    <tr> 
     <td>Volkswagen Passat Variant</td> 
     <td>2017</td> 
     <td>Uusimaa - Kerava</td> 
     <td>02650</td> 
     <td>15.12.2017</td> 
    </tr> 
    <tr> 
     <td colspan="4">Description</td> 
     <td>Price</td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum delectus accusantium mollitia iste 
      numquam, enim asperiores, doloribus sunt aliquam quisquam veniam. Dolores aliquam similique nihil harum, 
      voluptates! Ea, voluptas, veritatis! 
     </td> 
     <td> 
      450€ 
     </td> 
    </tr> 
</table>