如何安排THEAD內容

我婉安排我THEAD列看起來像下面的圖片如何安排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>

但它顯示這個樣子，我怎麼可以拆分的 'CA' 列

來源

2016-06-08 Mysterio4

你需要花費2行的THEAD顯示。下面是完整的代碼

<!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>

來源

2016-06-08 10:39:23 Kroonal

<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>

來源

2016-06-08 10:33:05 splifo

使用行跨度和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>

來源

2016-06-08 10:39:16 zer00ne

你不能一個細胞分裂成多個細胞，可以將現有的細胞只能合併到一起。也就是說，如果你想有五列，你需要創建五列，而不是使用<br>強制內容到一個單元格中的新行，然後僞造單獨的單元格，則使用兩行單元格。此，當然，需要適當使用colspan和rowspan屬性，如下面的：

table { 
 
    border-collapse: collapse; 
 
} 
 
th, 
 
td { 
 
    text-align: center; 
 
    border: 1px solid #000; 
 
    min-width: 4em; 
 
    min-height: 2em; 
 
    padding: 0.2em 0.5em; 
 
} 
 
th { 
 
    vertical-align: top; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <!-- rowspan="2" forces the following <th> element 
 
      to span two rows in its containing element: --> 
 
     <th rowspan="2">SUBJECT</th> 
 
     <th colspan="3">CA</th> 
 
     <!-- as it does here also: --> 
 
     <th rowspan="2">CA TOTAL (40)</th> 
 
    </tr> 
 
    <tr> 
 
     <!-- this <tr> contains only three <th> elements, 
 
      unlike the previous <tr> which contains five, 
 
      because two <th> elements of the previous row 
 
      will occupy space in this <tr> also --> 
 
     <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> 
 
    </tr> 
 
    <tr> 
 
     <td>Mathematics</td> 
 
     <td>3</td> 
 
     <td>5</td> 
 
     <td>7</td> 
 
     <td></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

JS Fiddle demo。

順便提一下，儘可能嘗試通過使用樣式表來設置樣式;這使得將來更新您的風格和演示文稿變得容易得多。

來源

2016-06-08 10:40:05

您可以使用它。完美工作：

<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>

來源

2016-06-08 10:47:13

如何安排THEAD內容

回答

相關問題