表rowspan和colspan

我需要一張這樣的表：

執行以下操作：HTML 檔案 [僅表格代碼]

<table border="1" cellpadding="8" cellspacing="0">
        <tr>
            <th rowspan="3">Subject code and Subject Name</th>
            <th colspan="2" rowspan="2">Internal Assessment</th>
            <th colspan="2" rowspan="2">External Assessment</th>
            <th colspan="2">Grand Total</th>
            <th rowspan="3">Remarks</th>
        </tr>
        <tr>
            <th rowspan="2">MM</th>
            <th rowspan="2">MO</th>
            <td></td>
        </tr>
        <tr>
            <th>MM</th>
            <th>MO</th>
            <th>MM</th>
            <th>MO</th>
        </tr>      
        <tr>
            <td class="subject">Economics Theory</td>
            <td class="total">40</td>
            <td class="obtained">32</td>
            <td class="total">60</td>
            <td class="obtained">43</td>
            <td class="total">100</td>
            <td class="obtained">75</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Elemetns of Statistics</td>
            <td>40</td>
            <td>31</td>
            <td>60</td>
            <td>38</td>
            <td>100</td>
            <td>69</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Company Law</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>47</td>
            <td>100</td>
            <td>79</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Money, Banking, Financial Management</td>
            <td>40</td>
            <td>31</td>
            <td>60</td>
            <td>36</td>
            <td>100</td>
            <td>67</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Elements of Coding</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>47</td>
            <td>100</td>
            <td>79</td>
            <td>P</td>
        </tr>
    </table>

但是我從上面的代碼中得到了類似的資訊：需要洗掉突出顯示的部分。

但是當試圖 <td></td> 從第二個中 洗掉額外的時，<tr></tr> 我得到了這樣的東西，這與預期的結果完全不同。

CSS檔案

table {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.subject {
    text-align: left;
    padding-left: 10px;
    padding-right: 95px;
}

.second {
    width: 20%;
}

.total {
    padding-left: 30px;
    padding-right: 30px;
}

.obtained {
    padding-left: 50px;
    padding-right: 50px;
}

uj5u.com熱心網友回復：

“完全不同”？該表在功能上是相同的；唯一可辨別的（幾乎不存在）差異是“總計”和其他標題之間的高度變化。

無論如何，通過向“主題代碼和主題名稱”標題添加垂直填充，我能夠讓它看起來非常相似。您也可以將其添加到“備注”標題中。真正跨越兩行的任何元素。

padding-top: 35px;
padding-bottom: 35px;

似乎與您希望它的外觀幾乎相同。

順便說一句，我敢打賭，通過使用現代 CSS 網格而不是表格，您會更輕松地完成這樣的作業。表格在一般情況下使用起來有點討厭，即使是這個解決方案也應該很明顯。

uj5u.com熱心網友回復：

我認為這應該更好

<table border="1" cellpadding="8" cellspacing="0">
    <tbody>
        <tr>
            <td rowspan="2">Subject code and Subject Name</td>
            <td colspan="2">Internal Assessment</td>
            <td colspan="2">External Assessment</td>
            <td colspan="2">Grand Total</td>
            <td rowspan="2">Remarks</td>
        </tr>
        <tr>
            <td>MM</td>
            <td>MO</td>
            <td>MM</td>
            <td>MO</td>
            <td>MM</td>
            <td>MO</td>
        </tr>
        <tr>
            <td class="subject">Economics Theory</td>
            <td class="total">40</td>
            <td class="obtained">32</td>
            <td class="total">60</td>
            <td class="obtained">43</td>
            <td class="total">100</td>
            <td class="obtained">75</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Elemetns of Statistics</td>
            <td>40</td>
            <td>31</td>
            <td>60</td>
            <td>38</td>
            <td>100</td>
            <td>69</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Company Law</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>47</td>
            <td>100</td>
            <td>79</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Money, Banking, Financial Management</td>
            <td>40</td>
            <td>31</td>
            <td>60</td>
            <td>36</td>
            <td>100</td>
            <td>67</td>
            <td>P</td>
        </tr>
        <tr>
            <td class="subject">Elements of Coding</td>
            <td>40</td>
            <td>32</td>
            <td>60</td>
            <td>47</td>
            <td>100</td>
            <td>79</td>
            <td>P</td>
        </tr>
    </tbody>
</table>

標籤：html css html-table

上一篇：兩個具有相同特性的CSS宣告有一個奇怪的行為

下一篇：網頁向下滾動時如何添加CSS屬性？