Table column with zero width

css, html

Solution

You could do this with some basic CSS styling & media queries, here's an example

<table border=1>
<thead>
<tr>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Row 1 Col 1</td>
    <td>Row 1 Col 2</td>
    <td>Row 1 Col 3</td>
</tr>
<tr>
    <td>Row 2 Col 1</td>
    <td>Row 2 Col 2</td>
    <td>Row 2 Col 3</td>
</tr>
<tr>
    <td>Row 3 Col 1</td>
    <td>Row 3 Col 2</td>
    <td>Row 3 Col 3</td>
</tr>
<tr>
    <td>Row 4 Col 1</td>
    <td>Row 4 Col 2</td>
    <td>Row 4 Col 3</td>
</tr>
</tbody>

<style>
@media only screen and (max-width:500px){
    table td:nth-child(2), table th:nth-child(2)  {
        display:none;
    }
}
</style>

So when the screen is smaller than 500px, the 2nd column will hide.

Fiddle showing it in action: http://jsfiddle.net/9rEgQ/2/

Problem

Is it possible at all? I have table that fills its container. (width 100%) Two of its columns (1st and 3rd) have minimum width, but middle one does not. When I am narrowing the window, I want 1st and 3rd columns to stay at minimum width, while middle column have to collapse completely (when window is too narrow, just 1st and 3rd columns must be displayed). Thanks. There is simplified code of what I have: ``` <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <style type="text/css"> .overflow{ text-overflow: ellipsis; word-break: break-all; word-wrap: break-word; } .table{ width: 100%; border-collapse: collapse; border-spacing: 0; } .first{ min-width: 20px; } </style> </head> <body> <table class="table"> <tr> <td class="first"><div class="overflow">oneoneoneone</div></td> <td class="second"><div class="overflow">twotwotwotwo</div></td> <td class="first"><div class="overflow">threethreethree</div></td> </tr> </table> </body> </html> ```

Original source