HTML Table colspan行跨

Question

I have 6 columns & I want to use colspan for 3&4 and 5&6 column. And I don't want to show 1st & 2nd column for that particular row.

How to hide 1&2 column in that row?

Desired output..

Answer 1

Remove the border from the cells you wish to "hide". They are still there, but visually absent.

Have a fiddle!

Experimental fiddle for a table { border: xxx; } table { border: xxx; } fix.

In this example I am targeting the cell with tbody tr:first-child td:first-child . This could obviously also be targeted with a 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

Use display:none; in your CSS File on the 1st & 2nd Column.

You can select them with:

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

Answer 3

使用visibility:hidden在该行的前两列中。

Answer 4

Try to use visibility: hidden; empty-cells: hide; visibility: hidden; empty-cells: hide; for that cells.

Answer 5

Here is a fiddle

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