jquery 如何使模板html表有第一列分为4个单元格和第二列只有一个单元格?

lztngnrs  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(135)

我的工作模板使用HTML和CSS。我面临的问题,设计表模板使用HTML和CSS
第二行上的问题i面,第一列有4个单元格,第二列有1个单元格
第一列具有标题performance,第二单元格被划分为4个单元格。
在第二列有标题disciplinary,第二行只有一个单元格
如何设计这张table
我试图

<table>
      <thead>
          <tr>
              <th>
                  Performance Rating for
                  last two years
              </th>
              <th>Disciplinary letters (in last two years)</th>
          </tr>
      </thead>
      <tbody>
          <tr> <th>Year</th> <th></th> <th></th> </tr>
          <tr> <th>Year</th> <th></th>  <th></th> </tr>

      </tbody>
  </table>

网页设计的表格如下所需:

更新文章

你能告诉我怎么用colspan和rowspan吗?
是的,它的工作,但我需要增加明年第二细胞的宽度
performance rating column

<table border="1">
      <thead>
          <tr>
              <th colspan="2">
                  Performance Rating for
                  last two years
              </th>
              <th>Disciplinary letters (in last two years)</th>
          </tr>
      </thead>
      <tbody>
          <tr colspan="2">
            <td>Year</td>
            <td ></td>
            <td rowspan="2"></td>
          </tr>
           <tr colspan="2"> 
             <td >Year</td>
             <td></td>
           </tr>
           
      </tbody>
  </table>
ljo96ir5

ljo96ir51#

我使用col span和row span解决了这个问题
这是我的代码

<table border="1">
      <thead>
          <tr>
              <th colspan="2">
                  Performance Rating for
                  last two years
              </th>
              <th>Disciplinary letters (in last two years)</th>
          </tr>
      </thead>
      <tbody>
          <tr colspan="2">
            <td style="width:50px;">Year</td>
            <td ></td>
            <td rowspan="2"></td>
          </tr>
           <tr colspan="2"> 
             <td style="width:50px;">Year</td>
             <td></td>
           </tr>
           
      </tbody>
  </table>

相关问题