CODEWITHSUNDEEP
htmlcss
TheRealPapa
TheRealPapa

Reputation: 4539

HTML table with 4 columns, 3 fixed one to be rest of width

I have a HTML table which forms part of a header in a mobile layout. I have a JSFIDDLE here

<table class="icon-buttons">
    <tr>
        <td class="header-desc">
            Tasks
        </td>
        <td class="header-icon-close">
            <i class="ion-ios-close ion-fw"></i>
        </td>
        <td class="header-icon-edit">
            <i class="ion-edit ion-fw"></i>
        </td>
        <td class="header-icon-delete">
            <i class="ion-close ion-fw"></i>
        </td>
    </tr>
</table>

The last three columns have a fixed width of 32px, and I want them floated to the right. I want the first column to take up the rest of the space available so it looks like below:

|                                                 |
| Tasks                                  C  E  D  | 
|                                                 |

My last 3 columns CSS is:

.header-icon-close,
.header-icon-edit,
.header-icon-delete {
  width: 32px;
  vertical-align: top;
}

I have tried giving the first column a width as a % of the screen size but this does not allow the last three to remain fixed in place. I have also tried floating the last three right but this did not work.

Is there a simple CSS way to make the first column take up the "rest of available width and no more" in case its content is too big, the first column / cell should wrap without affecting the last three.

|                                                 |
| Tasks Tasks Tasks Tasks Tasks Tasks    C  E  D  | 
| Tasks Tasks Tasks Tasks Tasks Tasks             |
|                                                 |

Upvotes: 1

Views: 126

Answers (1)

Itay Gal
Itay Gal

Reputation: 10824

Just add width: 100% to the table's class and remove the width of the first column

.icon-buttons{
    width: 100%;
}

Example

Upvotes: 3

Related Questions