CSS Fixed column width with scroll bar

Question

I'm a newbie regarding CSS and HTML, so apologies if this seems like a stupid question. But for the love of god, I can't seem to figure it out. I only get a horizontal scrollbar and not a vertical one.

In the code below I try to achieve that the last column, that contains the string 'aaaaaabbb...' becomes scrollable. So that when it's overfilled it starts a new line and shows a scrollbar. So I would like to see this for the last row:

Desired result:

aaaaaaaa
bbbbbbbc
cccccccc

HTML-code:

<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
    background-color: #eee;
}
.td_size {    
  width:100px; 
  height:200px;
  max-width:100px;
  min-width:100px; 
  max-height:200px; 
  min-height:2000px;
  overflow:scroll; 
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>&#43;N/A&#43;</td></tr>
<tr><th>Source</th><td>@Event@</td></tr>
<tr><th>Category</th><td>&amp;Request Fulfillment&amp;</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td</tr>
</table>
</body></html>

Thank you for your help.

I'm not sure I understand what you mean "fixed column width" — jcuenod
– jcuenod, Commented Mar 16, 2015 at 8:15

jcuenod · Accepted Answer · 2015-03-16 08:13:50Z

1

Two things:

You have a missing ">" at the end of your closing </td>.
You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td>

The solution you are looking for is word-wrap: break-word; This will allow the content to wrap.

I have modified your snippet:

<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th {
    text-align: left;
    background-color: #eee;
}
.td_size {    
  width:100px; 
  height:200px;
  max-width:100px;
  min-width:100px; 
  max-height:200px; 
  min-height:2000px;
  overflow: auto; /* changed this */
  word-wrap: break-word; /* added this */
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>&#43;N/A&#43;</td></tr>
<tr><th>Source</th><td>@Event@</td></tr>
<tr><th>Category</th><td>&amp;Request Fulfillment&amp;</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size" colspan=2>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td></tr>
</table>
</body></html>

edited Mar 16, 2015 at 8:13

answered Mar 16, 2015 at 8:07

jcuenod

58.9k15 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DarkLite1 Over a year ago

Thank you jcuenod, is there also a way to have the last row in a fixed width so the other rows are still automatic in reshaping width?

jcuenod Over a year ago

I don't know why you would want one cell (or row) with a fixed width. You would typically set the width of a table or a column (using table {width: 100px;} or whatever).

DarkLite1 Over a year ago

You're right, I just started another table with a fixed width for the part 'Description'. Then it was fine, but still not working in MS Outlook 2010. Fixed it by using word-break:break-all;.

Danield · Accepted Answer · 2015-03-16 08:27:21Z

1

Like others have mentioned, in order to get the long-one-word text to wrap - you need to add: word-wrap: break-word; to the td

However, achieving a vertical scroll on a table cell is problematic because by definition table cells expand to fit all the content.

You could work around this by setting display:block on that table cell. (like this)

But it's probably better to wrap the text within a span tag so as not to mess with the display of table elements:

Like so:

FIDDLE

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}
th,
td {
  padding: 5px;
}
th {
  text-align: left;
  background-color: #eee;
}
.td_size {
  width: 100px;
  height: 200px;
  max-width: 100px;
  min-width: 100px;
}
.td_size span {
  overflow: auto;
  display: block;
  max-height: 200px;
  word-wrap: break-word;
}

<h2>Ticket details</h2>
<table>
  <tr>
    <th>Requester</th>
    <td>^User^</td>
  </tr>
  <tr>
    <th>Submitted by</th>
    <td>®User®</td>
  </tr>
  <tr>
    <th>Service</th>
    <td>#GLOBAL END USER WORKPLACE#</td>
  </tr>
  <tr>
    <th>CI</th>
    <td>&#43;N/A&#43;</td>
  </tr>
  <tr>
    <th>Source</th>
    <td>@Event@</td>
  </tr>
  <tr>
    <th>Category</th>
    <td>&amp;Request Fulfillment&amp;</td>
  </tr>
  <tr>
    <th>Impact</th>
    <td>!None - No Degradation of Service!</td>
  </tr>
  <tr>
    <th colspan="2" style="text-align:Center">Assignment</th>
  </tr>
  <tr>
    <th>Group</th>
    <td>]Team]</td>
  </tr>
  <tr>
    <th>Staff</th>
    <td>[User[</td>
  </tr>
  <tr>
    <th colspan="2" style="text-align:Center">Description</th>
  </tr>
  <tr>
    <td class="td_size"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</span>
    </td>
  </tr>
</table>

edited Mar 16, 2015 at 8:27

answered Mar 16, 2015 at 8:20

Danield

127k37 gold badges235 silver badges268 bronze badges

3 Comments

DarkLite1 Over a year ago

Thank you very much, this was exactly what I needed. Couldn't find it myself. Really appreciate your help, all of you.

DarkLite1 Over a year ago

There's only one problem here.. The row colum of the box 'aaaaaaaabbbbb...' is not able to be wider than the box for 'Group' and 'Staff'. I would like to have the last box wider than the other columns above it.

jcuenod Over a year ago

That's just because you need to change the colspan of the <td>

Waelio · Accepted Answer · 2015-03-16 08:08:49Z

0

First, make that last column span over 2, ie colspan=2 but as for the css part you can use overflow-x and overflow-y to determine the scrolling parts Try it

answered Mar 16, 2015 at 8:08

Waelio

591 silver badge9 bronze badges

1 Comment

Waelio Over a year ago

<tr><td colspan="2" class="td_size">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td</tr>

Anam · Accepted Answer · 2015-03-16 08:09:40Z

0

you may use word-wrap: break-word; or <br> tag where you want to break the word

answered Mar 16, 2015 at 8:09

Anam

831 silver badge7 bronze badges

Collectives™ on Stack Overflow

CSS Fixed column width with scroll bar

4 Answers 4

3 Comments

FIDDLE

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related