HTML Table colspan行跨

Question

我有6列，我想將colspan用於3＆4和5＆6列。 而且我不想顯示該特定行的第一列和第二列。

如何在該行中隱藏1＆2列？

所需的輸出

Answer 1

從要“隱藏”的單元格上刪除邊框。 他們仍然在那里，但是在視覺上卻不在。

小提琴！

table { border: xxx; } 實驗小提琴 table { border: xxx; } table { border: xxx; }修復。

在此示例中，我使用tbody tr:first-child td:first-child定位單元格。 顯然，這也可以針對一個class 。

HTML

<table>
    <tbody>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
    width: 500px;
}
td {
    border: solid 1px #000;
    padding: 10px;
}
tbody tr:first-child td:first-child {
    border: none;
}

Answer 2

使用display:none; 在第一列和第二列的CSS文件中。

您可以通過以下方式選擇它們：

td:nth-of-type(1),
td:nth-of-type(2) {
   display:none;
}

Answer 3

使用visibility:hidden在該行的前兩列中。

Answer 4

嘗試使用visibility: hidden; empty-cells: hide; visibility: hidden; empty-cells: hide; 對於那個細胞。

Answer 5

這是一個小提琴

HTML

<table border="1">
    <thead>
        <tr>
            <td colspan="2" style="border: 0;">a1</td>
            <td colspan="2">a3</td>
            <td colspan="2">a5</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>5555</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border: none;
    border-collapse: collapse;
}