Question

您好，我无法创建html表，在该表的父行下将有子行，而每行将被视为表下的主行。我不擅长html我可以做的html表并删除行的边框，但实际上我只能制作一个简单的表，这是没用的。这就是为什么我不添加任何代码，对此感到抱歉。我已附上了表的图像i想要创建。这里“ A”是父行，“ A1”，“ A2”，“ A3”是子行，而A是父行，因为我还将基于该表编写服务器端代码。

<table>
<tr>
<td>A</td>
<td>A1</td>
<td>A2</td>
</tr>
<tr class="noBorder">
<td>B</td>
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C</td>
<td>C1</td>
<td>C2</td>
</tr>
</table>

 //**Css
 table, tr, td {
 border: 3px solid red;
 }
 tr.noBorder td {
 border: 0;
 }

请专家帮助。谢谢

Answer 1

Rowspan将为您服务

请参阅以下内容

var orderedProducts = products.OrderBy(a => 1) 
                       .ToList() // do the sorting
                       .OrderBy(a => 1); //convert to IOrderedEnumerable

Answer 2

简单点：

table,
th,
td {
  border: 1px solid black;
}

table {
  font-family: sans-serif;
  text-align: center;
  border-collapse: collapse;
}

table th {
  padding: 8px
}

table td {
  padding: 8px
}

<table width="100%" cellspacing="0">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
    <th>H4</th>
    <th>H5</th>
    <th>H6</th>
  </tr>
  <tr>
    <td rowspan="3">A</td>
    <td>A1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>A2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>A3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td rowspan="3">B</td>
    <td>B1</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>B2</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>B3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>


</table>

Answer 3

您将使用行跨度，请参见下面的示例！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>H1</td>
    <td>H2</td>
    <td>H3</td>
    <td>H4</td>
    <td>H5</td>
    <td>H6</td>
  </tr>
  <tr>
    <td rowspan="3">A</td>
    <td>A1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>A2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>A3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="3">B</td>
    <td>B1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>B2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>B3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td rowspan="3">C</td>
    <td>C1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>C2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>C3</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

在html表的父行下生成子行

3 个答案: