CODEWITHSUNDEEP
htmlcsshtml-tableexpand
DirtyNerd
DirtyNerd

Reputation: 71

Expanding table horizontally

I want to create a table with fixed-size columns (except for the first one which expands to fit the widest cell). The problem is that when there's not enough space horizontally, a scrollbar does not appear and columns get shrunk. Also I want cells to hide content when it's too long. I tried messing with overflow but it didn't help. Here's the code:

<table>
<tr>
    <td>1</td>
    <td style="width: 9999px">2</td>
    <td style="width: 9999px">3</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>

EDIT: There were many misunderstandings so I'll write everything here: First column is as wide as it needs to be (which means that it just fits the size of the widest cell inside it, it's the default HTML behaviour). Rest of the columns are fixed. This means that no matter what content is inside them, their width cannot change. When content's width exceeds fixed column's width then it just gets hidden like in CSS style overflow: hidden;. If there's not enough horizontal space to display table then a scrollbar should appear.

Upvotes: 1

Views: 1024

Answers (3)

ramsesoriginal
ramsesoriginal

Reputation: 1920

Here's what I'd do:

Html:

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

table {
    width: 100%;
    table-layout:fixed;
    word-wrap:break-word;
}

table td {
    width:9999px;
    border: 1px solid black;
    overflow: hidden;
}

table tr td:first-child {
    width: 10px;
    border: 1px solid black;
}

And then just:

  1. set the width of the first column to whatever you want it to be.
  2. set overflow: scroll on the table's container

The solution lies in the table-layout:fixed; property, which defines that the table should be exactly as wide as you have defined it. since doing so would mess up your text (It would overlap all the way), you can add a word-wrap:break-word; to make it break the words to multiple lines.

table-layout:fixed; is pretty well supported, except for IE/Mac (http://caniuse.com/#search=table-layout), word-wrap:break-word; is less supported (even though http://caniuse.com/#search=word-wrap shows otherwise, the break-word is a bit tricky..), but you can leave it there since it won't hurt you and makes your site future-proof.

EDIT I got what you want: first column flexible, the rest on a fixed with. Without drastically changing the html (and creating some ugly un-semantic un-performant monster) it's not possible (at the moment). Let me explain you why:

To have the table be of a fixed size (the width of all the fixed columns + something) you have to set table-layout:fixed;. This tells the browser to calculate the width of the table before displaying it, so that it can render it even before all the content has been loaded (bonus for you: performance boost!). But now you want to have one column flexible, so it would have to calculate the width at runtime, and we just prevented that so that we can have fixed-width columns.

That means that you still have to explicitly set the width of the first column. As far as I know, that's the only way to achieve the effect you want. I'll think a bit more about it, but I think that's the best possible.

EDIT 2 Ok, after trying out some ideas, I've come to the conclusion that the only way to achieve the effect you are seeking, you'd have to drop the table, and create a structure of divs and spans, floated left and right, with display: inline-block and word-wraps... not really semantic if what you have to show is tabular data. And definitively not maintainable. It's your call...

EDIT 3 And here you have a live demonstration, based on the jsfiddle by Blowski: http://jsfiddle.net/ramsesoriginal/KcV9B/

Upvotes: 1

tahdhaze09
tahdhaze09

Reputation: 2213

<style>
td.fixed
{
    width:200px;
    overfolw:hidden;
}
td.first
{
    width:auto;
    overflow:scroll;
}
</style>
<table>
<tr>
<td class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.</td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
</tr>
<tr>
<td class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor.</td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
</tr>
<tr>
<td class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
<td class="fixed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget vulputate velit. Nam luctus orci in felis ullamcorper venenatis elementum metus volutpat. Aliquam ac faucibus odio. Duis laoreet commodo dolor, at hendrerit magna semper id. Proin euismod pellentesque dapibus. Duis a nulla est. Aenean sed ligula at nibh pellentesque tempor. </td>
</tr>
</table>

I think the overflow:scroll on the first row should not give you a scrollbar, but it will pin the other rows to the right of the viewport.So, essentially the first row DOES have a definitive width, being whatever the remainder of the width of the viewport is after the fixed columns take their space.

The scrollbar you WILL get is a vertical browser scroll bar when your first row content pushes below the fold.

Upvotes: 0

Dan Blows
Dan Blows

Reputation: 21174

The overflow:scroll needs to be set on whatever element is containing the table. This should force a scrollbar to appear. Other than that, your code should be OK.

Upvotes: 0

Related Questions