Header 具有 rowspan

Question

这里有人知道如何制作这样的tableheader吗（参考下图）？

我试过：

<thead>
                    <tr>
                        <th>No.</th>
                        <th>Creation Date</th>
                        <th>Week Day</th> 
                        <th>Log Type</th>
                        <th colspan="5" rowspan="1" style="text-align: center">Time</th>
                        <th>action</th>
                    </tr>
                    <tr>
                      <th>IN/START</th>
                      <th>OUT/STOP</th>
                    </tr>
                </thead>

但遗憾的是，运气不好，table 脑袋被遗漏了，有什么帮助、建议、线索、建议、建议、想法吗？

Answer 1

在一栏上应该是 colspan="2"，在其他栏上应该是 rowspan="2"。使用这个：

table, th {border: 1px solid #ccc; border-collapse: collapse; font-weight: normal; font-family: 'Segoe UI'; margin: 0; padding: 0;}
table {width: 100%;}
th {padding: 5px;}

<table>
  <thead>
    <tr>
      <th rowspan="2">No.</th>
      <th rowspan="2">Creation Date</th>
      <th rowspan="2">Week Day</th> 
      <th rowspan="2">Log Type</th>
      <th colspan="2" style="text-align: center">Time</th>
      <th rowspan="2">action</th>
    </tr>
    <tr>
      <th>IN/START</th>
      <th>OUT/STOP</th>
    </tr>
  </thead>
</table>

Answer 2

习惯了colspan=""和rowspan=""像这样小心

试试这个

th{
border:solid 1px red;
  padding:5px;
}

<table border="0" cellpadding="0" cellspacing="0">
<thead>
                    <tr>
                        <th rowspan="2">No.</th>
                        <th rowspan="2">Creation Date</th>
                        <th rowspan="2">Week Day</th> 
                        <th rowspan="2">Log Type</th>
                        <th colspan="2" style="text-align: center">Time</th>
                        <th  rowspan="2">action</th>
                    </tr>
                    <tr>
                      <th>IN/START</th>
                      <th>OUT/STOP</th>
                    </tr>
                </thead>
</table>

Answer 3

您应该正确使用 rowspan 和 colspan。 Tutorial

这里我写了一些HTML代码，希望对你有帮助。

<table cellpadding="0" cellspacing="0" >
        <tr>
            <th rowspan="2">No</th>
            <th rowspan="2">CREATION DATE</th>
            <th rowspan="2">WEEK DAY</th
            <th rowspan="2">LOG TYPE</th>
            <th colspan="2">TIME</th>
            <th rowspan="2">ACTION</th>
        </tr>
        <tr>
            <th >IN/START</th>
            <th >OUT/STOP</th>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>TBODY</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

Answer 4

试试下面的，会有帮助的

<table>
    <tr>
        <th>No.</th>
        <th>Creation Date</th>
        <th>Week Day</th> 
        <th>Log Type</th>
        <th>
            <table>
                <tr>Time</tr>
                <tr>
                   <th>IN/START</th>
                   <th>OUT/STOP</th>
               </tr>
           </table>
       </th>
       <th>action</th>
    </tr>
</table>

Answer 5

无需使用 colspan 和 rowspan 使用这个简单的代码并根据需要添加 css。

<table border="1">
    <tr>
        <th>No.</th>
        <th>Creation Date</th>
        <th>Week Day</th> 
        <th>Log Type</th>
        <th>
            <table border="1">
                <tr>
                    <p style="text-align: center !important;">Time</p>
                </tr>
                <tr>
                    <th>IN/START</th>
                    <th>OUT/STOP</th>
                </tr>
            </table>
        </th>
        <th>action</th>
    </tr>
 </table>

玩得开心。

Header 具有 rowspan

Header with a rowspan

html

css

html-table