Question

我想在我的thead中安排列看起来像下图

这是我的代码

<thead>
        <tr>
            <td style="text-align: center;">SUBJECT</td>
            <td style="text-align: center;" colspan="3">CA<br> T1 T2 T3</td>
            <td style="text-align: center;">CA TOTAL (40)</td>
            <td style="text-align: center;">SIGN</td>
        </tr>
    </thead>

但它显示如下，我怎么能分开＆＃39; CA＆＃39;柱

Answer 1

你需要2行才能显示。这是完整的代码

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<thead>
    <tr>
        <td style="text-align: center;" rowspan='2'>SUBJECT</td>
        <td style="text-align: center;" colspan="3">CA</td>
        <td style="text-align: center;"  rowspan='2'>CA TOTAL (40)</td>
        <td style="text-align: center;"  rowspan='2'>SIGN</td>
    </tr>
    <tr>
     <td style="text-align: center;">T1</td>
     <td style="text-align: center;">T2</td>
     <td style="text-align: center;">T3</td>
    </tr>
</thead>
</table>

</body>
</html>

Answer 2

您无法将单元格拆分为更多单元格，只能将现有单元格合并在一起。也就是说，如果你想要有五列，你需要创建五列，而不是使用puts强制内容到一个单元格中的新行，然后伪造单独的单元格，使用两行单元格。当然，这需要适当使用set m {k[exit]}和<br>属性，例如：

colspan

rowspan

JS Fiddle demo

顺便说一句，在可能的情况下，尝试使用样式表来设置内容的样式;这使得将来更新样式和演示文稿变得更加容易。

Answer 3

<thead>
    <tr>
        <td style="text-align: center;" rowspan='2'>SUBJECT</td>
        <td style="text-align: center;" colspan="3">CA</td>
        <td style="text-align: center;"  rowspan='2'>CA TOTAL (40)</td>
        <td style="text-align: center;"  rowspan='2'>SIGN</td>
    </tr>
    <tr>
     <td style="text-align: center;">T1</td>
     <td style="text-align: center;">T2</td>
     <td style="text-align: center;">T3</td>
    </tr>
</thead>

Answer 4

使用rowspan和2 trs

th { vertical-align: top; border: 1px solid black;}

<table>
<thead>
        <tr>
            <th rowspan="2" style="text-align: center;">SUBJECT</th>
            <th style="text-align: center;" colspan="3">CA</th>
            <th rowspan="2" style="text-align: center;">CA TOTAL (40)</th>
        </tr>
        <tr>
          <th>T1</th>
          <th>T2</th>
          <th>T3</th>
</tr>
</thead>
  </table>

Answer 5

你可以用它。完美地工作：

<style>
table, th, td{
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    border: 1px solid #000;
}
</style>
<table>
<thead>
        <tr>
            <th rowspan="2" >SUBJECT</th>
            <th colspan="3">CA</th>
            <th rowspan="2">CA TOTAL (40)</th>
            <th rowspan="2">SIGN</th>
        </tr>
   <tr>
   <th>T1</th>
   <th>T2</th>
   <th>T3</th>
   </tr>

   </thead>
   <tbody>
    <tr>
      <td>English Language</td>
      <td>3</td>
      <td>6</td>
      <td>10</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Mathematics</td>
      <td>3</td>
      <td>5</td>
      <td>7</td>
      <td></td>
      <td></td>
    </tr>

   </tbody> 
    </table>

如何在thead

5 个答案: