Shri Shri - 1 month ago 10
HTML Question

HTML Table colspan rowspan

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

enter image description here

Answer

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