0

我正在尝试制作这张桌子。但问题是，尽管每一行都在不同的行中，但最后一行仍然紧挨着前一行。我不明白为什么。我试图改变宽度和高度，但没有任何效果。这是代码：

<html>
<head>

</head>
<body>
<table border="1" width="50%">
<tr>
   <th rowspan="2">
     nnnnnnnnnn
   </th>
   <th colspan="2">
      aaaaaaaaaaaaaaa
   </th>
</tr>
<tr>
     <td>bbbbbbbbbbbbb</td> 
     <td>ccccccccccccc</td> 
</tr>
<tr>
     <td rowspan="2">Un</td>
     <td  rowspan="2">bal blabal blabal blabal blabal blabal </td>
     <td  rowspan="2">xxxxxxxxxxxx</td>
</tr>
<tr>
     <td rowspan="2">Deux</td>
     <td  rowspan="2">yyyyyyyyyyy </td>
     <td  rowspan="2">bal blabal blabal blabal blabal</td>
</tr>
</table>
</body>
</html>

这就是我希望表格的外观：图片

4

5 回答 5

1 

<html>
<head>

</head>
<body>
<table border="1" width="50%">
<tr>
   <th rowspan="2">
     nnnnnnnnnn
   </th>
   <th colspan="2">
      aaaaaaaaaaaaaaa
   </th>
</tr>
<tr>
     <td>bbbbbbbbbbbbb</td> 
     <td colspan="2">ccccccccccccc</td> 
</tr>
<tr>
     <td>Un</td>
     <td>bal blabal blabal blabal blabal blabal </td>
     <td>xxxxxxxxxxxx</td>
</tr>
<tr>
     <td>Deux</td>
     <td>yyyyyyyyyyy </td>
     <td>bal blabal blabal blabal blabal</td>
</tr>
</table>
</body>
</html>

于 2019-06-05T11:34:25.097 回答
0

基本 HTML 表格设计

tr {
  height: 80px;
}

table,tr,th,td{
  border: 1px solid #ddd;
}
<html>

<head>

</head>

<body>
  <table border="0" width="100%">
    <tr>
      <th rowspan="2">
        nnnnnnnnnn
      </th>
      <th colspan="5">
        aaaaaaaaaaaaaaa
      </th>
    </tr>
    <tr>
      <td colspan="3">bbbbbbbbbbbbb</td>
      <td colspan="2">ccccccccccccc</td>
    </tr>
    <tr>
      <td rowspan="1">Un</td>
      <td colspan="2">bal blabal blabal blabal blabal blabal </td>
      <td colspan="2">xxxxxxxxxxxx</td>
    </tr>
    <tr>
      <td rowspan="1">Deux</td>
      <td colspan="2">yyyyyyyyyyy </td>
      <td colspan="2">bal blabal blabal blabal blabal</td>
    </tr>
  </table>
</body>

</html>

于 2019-06-05T11:46:21.437 回答
0

我按照您发布的图片进行操作，并带有表格。但我建议使用Flexbox

<html>
<body>
  <table border="1" width="50%">
    <tr>
      <th rowspan="2">
        nnnnnnnnnn
      </th>
      <th colspan="4">
        aaaaaaaaaaaaaaa
      </th>
    </tr>
    <tr>
      <td>bbbbbbbbbbbbb asdasd</td>
      <td>ccccccccccccc</td>
    </tr>
    <tr>
      <td>Un</td>
      <td>bal blabal blabal blabal </td>
      <td>xxxxxxxxxxxx</td>
    </tr>
    <tr></tr>
    <tr>
      <td>Deux</td>
      <td>yyyyyyyyyyy </td>
      <td>bal blabal blabal blabal</td>
    </tr>
  </table>
</body>
</html>

于 2019-06-05T11:48:35.483 回答
0 

<html>
<head>

</head>
<body>
<table border="1" width="50%">
<tr>
   <th rowspan="2">
     nnnnnnnnnn
   </th>
   <th colspan="4">
      aaaaaaaaaaaaaaa
   </th>
</tr>
<tr>
     <td colspan="2">bbbbbbbbbbbbb</td> 
     <td colspan="2">ccccccccccccc</td> 
</tr>
<tr>
     <td rowspan="1">Un</td>
     <td  colspan="2">bal blabal blabal blabal blabal blabal </td>
     <td  colspan="2">xxxxxxxxxxxx</td>
</tr>
<tr>
     <td rowspan="1">Deux</td>
     <td  colspan="2">yyyyyyyyyyy </td>
     <td  colspan="2">bal blabal blabal blabal blabal</td>
</tr>
</table>
</body>
</html>

于 2019-06-05T11:37:03.987 回答
0

只需删除 2 行的行跨度即可为您提供一个表格，如示例中所示。

<html>
<head>

</head>
<body>
<table border="1" width="50%">
<tr>
   <th rowspan="2">
     nnnnnnnnnn
   </th>
   <th colspan="2">
      aaaaaaaaaaaaaaa
   </th>
</tr>
<tr>
     <td>bbbbbbbbbbbbb</td> 
     <td>ccccccccccccc</td> 
</tr>
<tr>
     <td>Un</td>
     <td>bal blabal blabal blabal blabal blabal </td>
     <td>xxxxxxxxxxxx</td>
</tr>
<tr>
     <td>Deux</td>
     <td>yyyyyyyyyyy </td>
     <td>bal blabal blabal blabal blabal</td>
</tr>
</table>
</body>
</html>

于 2019-06-05T11:38:00.337 回答