Horje

Full Example of Hidding Columns in a HTML Table

You can hide specific columns with the visibility property:
index.html
Example: HTML
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Hide Columns</h2>
<p>You can hide specific columns with the visibility property:</p>

<table style="width: 100%;">
<colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

<p><b>Note:</b> The table columns does not collapse properly in Safari browsers.</p>
</body>
</html>

Output should be:

Full Example of Hidding Columns in a HTML Table



Single Articles
Full Example of Hidding Columns in a HTML TableHTML Table Colgroup


Related Articles
What is HTML Table Colgroup HTML Table Colgroup
How to create HTML Multiple Col Elements HTML Table Colgroup
How to create HTML Table Empty Colgroups HTML Table Colgroup
How to Hide Columns of HTML Table HTML Table Colgroup

Type:
Html
Category:
Web Tutorial
Sub Category:
HTML Table Colgroup
Uploaded by:
Admin