Fixed table layout and display all content

HTML & CSS
1

Hello,
I want to display a table with many columns within a fixed width area.
To achieve this I’m using table-layout:fixed, so that the table does not expand to fit the content.
But using fixed table layout is cutting off content. The table has both text and images. I’m able to display the text by using word-wrap property.
I tried using overflow:auto for the table expecting a horizontal scrollbar to appear, but no it doesn’t.
What do I have to do for the horizontal scrollbar to appear?

Thanks,
Mary Ann.

2

Hi Mary Ann, Welcome to Sitepoint :slight_smile:

If I understand correctly you could place the table inside a fixed width div that is set to overflow:auto and then inside this div place your table.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.tablewrap {
    width:600px;
    border:10px solid red;
    margin:auto;
    overflow:auto;
padding:10px;
}
.tablewrap td {
    border:1px solid #000;
    vertical-align:top;
    padding:10px;
}
</style>
</head>
<body>
<div class="tablewrap">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
        </tr>
    </table>
</div>
</body>
</html>
3

Hi,
Thank you very much for the reply.
I have a problem that I don’t know the exact pixel width of the div. I can just give percentage width.
So table layout-fixed is a good solution for me. I am able to display the text with word wrapping. I have 2 columns displaying images. The images are getting cut off. I need the horizontal scrollbar for the images to display completely.

Thanks once again,
Mary Ann.

4

I have a problem that I don’t know the exact pixel width of the div. I can just give percentage width.

That will still work. Just give it a percentage width.

You’ll have to provide some working code of the problem that you are having (or a link) because there are so many variables I can’t make a one and for all solution. It all depends on context and exactly what you are doing.

You can see from the code I posted above how it works so you just need to accommodate that setup in your layout.

With example image and percentage width:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.tablewrap {
    width:50%;
    border:10px solid red;
    margin:auto;
    overflow:auto;
padding:10px;
}
.tablewrap td {
    border:1px solid #000;
    vertical-align:top;
    padding:10px;
}
table{table-layout:fixed}
img{display:block;background:blue;border:1px solid #000}
</style>
</head>
<body>
<div class="tablewrap">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td><img src="images/example.gif" width="253" height="39" alt="example image" /></td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
            <td>Some content </td>
            <td>Some more content </td>
        </tr>
    </table>
</div>
</body>
</html>
5

Hello Paul,
Thank you once again.
I took your solution and applied our setup. But i still don’t get the horizontal scrollbar.
I’m giving some sample code.

 
<html>
<head>    
    <title></title>
    <style type="text/css">
    .framer_scrollable
{
  height: 100%;
  overflow: auto;
}

TABLE.menus DIV.framer_scrollable
{
  width: auto !important;
}
TABLE.vector_fields
{
  width: 100%;
}
.vector_fields TR.r0 TD
{
  border-top: #CCC 1px solid;
  text-align: left;
}
.vector_fields TD 
{
    table-layout:fixed;    
    word-wrap:break-word;
}
.vector_fields TD IMG
{
    display:block;    
}
.b_off
{
  background-color: #FFF;
  margin-left: 0px;
  margin-right: 0px;
  font-variant: small-caps;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.b_off.b_color1_b_off
{
  background: url(../images/button_bg.png) repeat-x;
  color: White;
  overflow: hidden;
}
.b_short_white
{
  height: 19px;
}
.b_short_white .left
{
  min-width: 28px;
  font-size: 0.75em;
  padding-top: 0px;
  padding-left: 8px;
}
.b_short_white_ie .left
{
  width: 28px;
}
.b_short_white .right
{
  width: 9px;
  padding-bottom: 0px;
  float: right;
}
.b_off .b_short_white .left
{
  background: url(../images/button_short_white.gif) no-repeat /*left top*/;
  float: left;
}
.b_off .b_short_white .right
{
  background: url(../images/button_short_white_end.gif) no-repeat /*left top*/;
  float: right;
}
DIV.left
{
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  height: 100%;
  float: left;
}
DIV.right
{
  vertical-align: middle;
  height: 100%;
  float: right;
}

    </style>
</head>
<body>
    <div style="text-align: center; margin: auto; width: 50%; height: 100%; vertical-align: middle bottom; border:solid 5px red"
        id="scrollable" class="my_0_a_find_core_item_app                 framer_scrollable framer_scrollable_hack">
        <table style="table-layout: fixed" class="vector_fields">
            <form id="my_0_a_find_core_item_app_results_0" onsubmit="return validate_and_cover(this);"
            method="post" action="" autocomplete="off">
            <tbody>
                <tr class="htm_row_input c r0" >
                    <input value="Test 123 Test 123 Test 123 Test 123" type="hidden" name="args.description">
                    <td class="htm_icon_row" rowspan="2" >
                        <img class="form_icon" src="image/bcbsa_logo.gif">
                    </td>
                    <td class="f description">
                        Test 123 Test 123 Test 123 Test 123
                    </td>
                    <td class="f inquiry_fields" colspan="2">
                        <span class="f amount"><span class="key"><span class="req_flag">*</span>Amount</span><span
                            class="value"><input id="args.amount" class="text amount readonly"
                                value="$50.00" readonly maxlength="15" size="19" name="args.amount" 
                                autocomplete="off" obj="args.amount"><span id="args.amount_error"
                                    class="error"></span></span></span>
                    </td>
                    <td style="text-align: right; width: 7%">
                        <table>
                            <tbody>
                                <tr>
                                    <td style="border-top: 0px" class="button">
                                        <div class="b_off b_color1_b_off  b_short_white b_short_white_ie" onmousedown="button_on(this)"
                                            onclick="button_submit(this);">
                                            <div class="b_short_white">
                                                <div class="left">
                                                    Add</div>
                                                <div class="right">
                                                </div>
                                            </div>
                                            <input class="submit_button" value="Add" type="submit"></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="description" colspan="4">
                        Test 123 Test 123 
                    </td>
                </tr>
            </form>
    </div>
</body>
</html>

Appreciate your help.

Regards,
Mary Ann.

6

Hi,

Sorry, there was an error in my example:(

You’ll need to remove the width from the table otherwise the content will just get clipped. This may make the browser not use the table:layout:fixed algorithm but I believe it will attempt to do this even without a width.

I don’t see how else it can be done as it seems you want fixed width columns but only when it suits you :).


table.vector_fields
{
  width:auto;
 table-layout:fixed
}

As an aside you have a lot of broken code above but I assume you just copied it incorrectly. For example the form cannot go between the table tags. All content in a table must be inside the td or th tags (apart from tbody etc and caption). The form has to fit inside one table cell or else surround the whole table.

You don’t have a doctype so all versions of IE weill behave like ie5 and is a bad move. You can’t use 100% height in that way either (see CSS faq on 100% height).

Hope it’s some use anyway.

7

Hi,
Thank you very much for the solution.
I fixed the problem by giving table-layout fixed for the upper level table and it gave me the horizontal scrollbar.
But now i face another problem. When I resize the browser window, the table doesn’t resize. Is it possible to do so?

8

I think we’d need to see the actual page to take this any further as it’s quite hard to understand all the dynamics that are needed.:slight_smile:

If things are causing that many problems then perhaps its time to re-think the design a little. Not everything is possible but I’d need to see the page to say whether it’s feasible or not.