Scrollable and aligned CSS table

I have a simple, I want a scrollable table with aligned columns.

I tried this (from https://stackoverflow.com/a/11483686/1599054):

<table>

    <thead>

        <tr><th>loooooooooooooong</th><th>headers</th></tr>

    </thead>

    <tbody>

        <tr><td>t</td><td>t</td></tr>

        <tr><td>t</td><td>t</td></tr>

        <tr><td>t</td><td>t</td></tr>

    </tbody> </table>

And the CSS:

thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }

tbody { display:block; overflow:auto; height:100px; }

th { height:50px; }

td { height:50px; background:blue; margin:0px; cell-spacing:0px;}

You can see it here: http://jsfiddle.net/Rfgm2/1/

My problem is that I have a small content but big headers, is their a mean to "dynamically" aligne them?

edited Nov 22 '18 at 15:48

Brian Tompsett - 汤莱恩

4,2031338101

asked May 24 '13 at 22:36

GlinesMome

48411024

stackoverflow.com/questions/673153/…

– Kevin Boucher
May 24 '13 at 22:39

add a comment |

I have a simple, I want a scrollable table with aligned columns.

I tried this (from https://stackoverflow.com/a/11483686/1599054):

<table>

    <thead>

        <tr><th>loooooooooooooong</th><th>headers</th></tr>

    </thead>

    <tbody>

        <tr><td>t</td><td>t</td></tr>

        <tr><td>t</td><td>t</td></tr>

        <tr><td>t</td><td>t</td></tr>

    </tbody> </table>

And the CSS:

thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }

tbody { display:block; overflow:auto; height:100px; }

th { height:50px; }

td { height:50px; background:blue; margin:0px; cell-spacing:0px;}

You can see it here: http://jsfiddle.net/Rfgm2/1/

My problem is that I have a small content but big headers, is their a mean to "dynamically" aligne them?

edited Nov 22 '18 at 15:48

Brian Tompsett - 汤莱恩

4,2031338101

asked May 24 '13 at 22:36

GlinesMome

48411024

stackoverflow.com/questions/673153/…

– Kevin Boucher
May 24 '13 at 22:39

add a comment |

I have a simple, I want a scrollable table with aligned columns.

I tried this (from https://stackoverflow.com/a/11483686/1599054):

<table>

    <thead>

        <tr><th>loooooooooooooong</th><th>headers</th></tr>

    </thead>

    <tbody>

        <tr><td>t</td><td>t</td></tr>

        <tr><td>t</td><td>t</td></tr>

        <tr><td>t</td><td>t</td></tr>

    </tbody> </table>

And the CSS:

thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }

tbody { display:block; overflow:auto; height:100px; }

th { height:50px; }

td { height:50px; background:blue; margin:0px; cell-spacing:0px;}

You can see it here: http://jsfiddle.net/Rfgm2/1/

My problem is that I have a small content but big headers, is their a mean to "dynamically" aligne them?

edited Nov 22 '18 at 15:48

Brian Tompsett - 汤莱恩

4,2031338101

asked May 24 '13 at 22:36

GlinesMome

48411024

I have a simple, I want a scrollable table with aligned columns.

I tried this (from https://stackoverflow.com/a/11483686/1599054):

<table>

    <thead>

        <tr><th>loooooooooooooong</th><th>headers</th></tr>

    </thead>

    <tbody>

        <tr><td>t</td><td>t</td></tr>

        <tr><td>t</td><td>t</td></tr>

        <tr><td>t</td><td>t</td></tr>

    </tbody> </table>

And the CSS:

thead { display:block; background: green; margin:0px; cell-spacing:0px; left:0px; }

tbody { display:block; overflow:auto; height:100px; }

th { height:50px; }

td { height:50px; background:blue; margin:0px; cell-spacing:0px;}

You can see it here: http://jsfiddle.net/Rfgm2/1/

My problem is that I have a small content but big headers, is their a mean to "dynamically" aligne them?

html css html-table

edited Nov 22 '18 at 15:48

Brian Tompsett - 汤莱恩

4,2031338101

asked May 24 '13 at 22:36

GlinesMome

48411024

edited Nov 22 '18 at 15:48

Brian Tompsett - 汤莱恩

4,2031338101

asked May 24 '13 at 22:36

GlinesMome

48411024

edited Nov 22 '18 at 15:48

Brian Tompsett - 汤莱恩

4,2031338101

edited Nov 22 '18 at 15:48

Brian Tompsett - 汤莱恩

4,2031338101

edited Nov 22 '18 at 15:48

Brian Tompsett - 汤莱恩

4,2031338101

asked May 24 '13 at 22:36

GlinesMome

48411024

asked May 24 '13 at 22:36

GlinesMome

48411024

asked May 24 '13 at 22:36

GlinesMome

48411024

stackoverflow.com/questions/673153/…

– Kevin Boucher
May 24 '13 at 22:39

add a comment |

stackoverflow.com/questions/673153/…

– Kevin Boucher
May 24 '13 at 22:39

stackoverflow.com/questions/673153/…

– Kevin Boucher
May 24 '13 at 22:39

add a comment |

2 Answers
2

active

oldest

votes

I have found a working example for you. You must use a combination of div and table to achieve this:

<table cellspacing="0" cellpadding="0" border="0" width="325">

  <tr>

    <td>

       <table cellspacing="0" cellpadding="1" border="1" width="300" >

         <tr>

            <th width="50%" style="word-wrap:break-word;">Short heading</th>

            <th width="50%" style="word-wrap:break-word;">Lonnnnngggeeer heading</th>

         </tr>

       </table>

    </td>

  </tr>

  <tr>

    <td>

       <div style="width:325px; height:48px; overflow:auto;">

         <table cellspacing="0" cellpadding="1" border="1" width="300" >

           <tr>

             <td>col 1 data 1</td>

             <td>col 2 data 1</td>

           </tr>

           <tr>

             <td>col 1 data 2</td>

             <td>col 2 data 2</td>

           </tr>

           <tr>

             <td>col 1 data 3</td>

             <td>col 2 data 3</td>

           </tr>

         </table>  

       </div>

    </td>

  </tr>

</table>

jsFiddle here: http://jsfiddle.net/2ZnWL/1/

edited May 25 '13 at 10:52

answered May 24 '13 at 22:41

adaam

2,98751847

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

@GlinesMome Updated my answer with a good solution for you

– adaam
May 25 '13 at 10:47

Perfect, thank you so much.

– GlinesMome
May 25 '13 at 11:02

Could you please highlight exactly what you changed? It makes your answer much more useful for others.

– Michael Scheper
Oct 23 '14 at 6:48

add a comment |

Remove display: block; from thead and tbody You are messing with the default styling of those elements by putting that there.

Fiddle

answered May 24 '13 at 22:42

Watson

606

2

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f16744534%2fscrollable-and-aligned-css-table%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I have found a working example for you. You must use a combination of div and table to achieve this:

<table cellspacing="0" cellpadding="0" border="0" width="325">

  <tr>

    <td>

       <table cellspacing="0" cellpadding="1" border="1" width="300" >

         <tr>

            <th width="50%" style="word-wrap:break-word;">Short heading</th>

            <th width="50%" style="word-wrap:break-word;">Lonnnnngggeeer heading</th>

         </tr>

       </table>

    </td>

  </tr>

  <tr>

    <td>

       <div style="width:325px; height:48px; overflow:auto;">

         <table cellspacing="0" cellpadding="1" border="1" width="300" >

           <tr>

             <td>col 1 data 1</td>

             <td>col 2 data 1</td>

           </tr>

           <tr>

             <td>col 1 data 2</td>

             <td>col 2 data 2</td>

           </tr>

           <tr>

             <td>col 1 data 3</td>

             <td>col 2 data 3</td>

           </tr>

         </table>  

       </div>

    </td>

  </tr>

</table>

jsFiddle here: http://jsfiddle.net/2ZnWL/1/

edited May 25 '13 at 10:52

answered May 24 '13 at 22:41

adaam

2,98751847

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

@GlinesMome Updated my answer with a good solution for you

– adaam
May 25 '13 at 10:47

Perfect, thank you so much.

– GlinesMome
May 25 '13 at 11:02

Could you please highlight exactly what you changed? It makes your answer much more useful for others.

– Michael Scheper
Oct 23 '14 at 6:48

add a comment |

I have found a working example for you. You must use a combination of div and table to achieve this:

<table cellspacing="0" cellpadding="0" border="0" width="325">

  <tr>

    <td>

       <table cellspacing="0" cellpadding="1" border="1" width="300" >

         <tr>

            <th width="50%" style="word-wrap:break-word;">Short heading</th>

            <th width="50%" style="word-wrap:break-word;">Lonnnnngggeeer heading</th>

         </tr>

       </table>

    </td>

  </tr>

  <tr>

    <td>

       <div style="width:325px; height:48px; overflow:auto;">

         <table cellspacing="0" cellpadding="1" border="1" width="300" >

           <tr>

             <td>col 1 data 1</td>

             <td>col 2 data 1</td>

           </tr>

           <tr>

             <td>col 1 data 2</td>

             <td>col 2 data 2</td>

           </tr>

           <tr>

             <td>col 1 data 3</td>

             <td>col 2 data 3</td>

           </tr>

         </table>  

       </div>

    </td>

  </tr>

</table>

jsFiddle here: http://jsfiddle.net/2ZnWL/1/

edited May 25 '13 at 10:52

answered May 24 '13 at 22:41

adaam

2,98751847

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

@GlinesMome Updated my answer with a good solution for you

– adaam
May 25 '13 at 10:47

Perfect, thank you so much.

– GlinesMome
May 25 '13 at 11:02

Could you please highlight exactly what you changed? It makes your answer much more useful for others.

– Michael Scheper
Oct 23 '14 at 6:48

add a comment |

I have found a working example for you. You must use a combination of div and table to achieve this:

<table cellspacing="0" cellpadding="0" border="0" width="325">

  <tr>

    <td>

       <table cellspacing="0" cellpadding="1" border="1" width="300" >

         <tr>

            <th width="50%" style="word-wrap:break-word;">Short heading</th>

            <th width="50%" style="word-wrap:break-word;">Lonnnnngggeeer heading</th>

         </tr>

       </table>

    </td>

  </tr>

  <tr>

    <td>

       <div style="width:325px; height:48px; overflow:auto;">

         <table cellspacing="0" cellpadding="1" border="1" width="300" >

           <tr>

             <td>col 1 data 1</td>

             <td>col 2 data 1</td>

           </tr>

           <tr>

             <td>col 1 data 2</td>

             <td>col 2 data 2</td>

           </tr>

           <tr>

             <td>col 1 data 3</td>

             <td>col 2 data 3</td>

           </tr>

         </table>  

       </div>

    </td>

  </tr>

</table>

jsFiddle here: http://jsfiddle.net/2ZnWL/1/

edited May 25 '13 at 10:52

answered May 24 '13 at 22:41

adaam

2,98751847

I have found a working example for you. You must use a combination of div and table to achieve this:

<table cellspacing="0" cellpadding="0" border="0" width="325">

  <tr>

    <td>

       <table cellspacing="0" cellpadding="1" border="1" width="300" >

         <tr>

            <th width="50%" style="word-wrap:break-word;">Short heading</th>

            <th width="50%" style="word-wrap:break-word;">Lonnnnngggeeer heading</th>

         </tr>

       </table>

    </td>

  </tr>

  <tr>

    <td>

       <div style="width:325px; height:48px; overflow:auto;">

         <table cellspacing="0" cellpadding="1" border="1" width="300" >

           <tr>

             <td>col 1 data 1</td>

             <td>col 2 data 1</td>

           </tr>

           <tr>

             <td>col 1 data 2</td>

             <td>col 2 data 2</td>

           </tr>

           <tr>

             <td>col 1 data 3</td>

             <td>col 2 data 3</td>

           </tr>

         </table>  

       </div>

    </td>

  </tr>

</table>

jsFiddle here: http://jsfiddle.net/2ZnWL/1/

edited May 25 '13 at 10:52

answered May 24 '13 at 22:41

adaam

2,98751847

edited May 25 '13 at 10:52

answered May 24 '13 at 22:41

adaam

2,98751847

answered May 24 '13 at 22:41

adaam

2,98751847

answered May 24 '13 at 22:41

adaam

2,98751847

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

@GlinesMome Updated my answer with a good solution for you

– adaam
May 25 '13 at 10:47

Perfect, thank you so much.

– GlinesMome
May 25 '13 at 11:02

Could you please highlight exactly what you changed? It makes your answer much more useful for others.

– Michael Scheper
Oct 23 '14 at 6:48

add a comment |

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

@GlinesMome Updated my answer with a good solution for you

– adaam
May 25 '13 at 10:47

Perfect, thank you so much.

– GlinesMome
May 25 '13 at 11:02

Could you please highlight exactly what you changed? It makes your answer much more useful for others.

– Michael Scheper
Oct 23 '14 at 6:48

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

@GlinesMome Updated my answer with a good solution for you

– adaam
May 25 '13 at 10:47

Perfect, thank you so much.

– GlinesMome
May 25 '13 at 11:02

Could you please highlight exactly what you changed? It makes your answer much more useful for others.

– Michael Scheper
Oct 23 '14 at 6:48

add a comment |

Remove display: block; from thead and tbody You are messing with the default styling of those elements by putting that there.

Fiddle

answered May 24 '13 at 22:42

Watson

606

2

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

add a comment |

Remove display: block; from thead and tbody You are messing with the default styling of those elements by putting that there.

Fiddle

answered May 24 '13 at 22:42

Watson

606

2

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

add a comment |

Remove display: block; from thead and tbody You are messing with the default styling of those elements by putting that there.

Fiddle

answered May 24 '13 at 22:42

Watson

606

Remove display: block; from thead and tbody You are messing with the default styling of those elements by putting that there.

Fiddle

answered May 24 '13 at 22:42

Watson

606

answered May 24 '13 at 22:42

Watson

606

answered May 24 '13 at 22:42

Watson

606

answered May 24 '13 at 22:42

Watson

606

2

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

add a comment |

2

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

If I do that, I loose the scroll.

– GlinesMome
May 25 '13 at 7:55

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg