How do I line up two tables without having their content overlap?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm using the latest version of Firefox and Chrome on Win XP. I want to display two tables on the same horizontal plane. However, I'm having a problem. Right now I have:
<table width="100" style="display: inline-block;">
...
</table>
<table width="100" style="display: inline-block;">
...
</table>
However, right now, the two tables overlap because the content of the first table is bigger than 100 pixels. Without changing the width, does anyone know how I can change/add to the styles so that the second table will appear to the right of the first table but clear all of the first table's contents?
css html-table
edited Jan 4 at 15:40
Brian Tompsett - 汤莱恩
4,2671339104
asked Jan 11 '12 at 21:53
DaveDave
1,40771207377
add a comment |
I'm using the latest version of Firefox and Chrome on Win XP. I want to display two tables on the same horizontal plane. However, I'm having a problem. Right now I have:
<table width="100" style="display: inline-block;">
...
</table>
<table width="100" style="display: inline-block;">
...
</table>
However, right now, the two tables overlap because the content of the first table is bigger than 100 pixels. Without changing the width, does anyone know how I can change/add to the styles so that the second table will appear to the right of the first table but clear all of the first table's contents?
css html-table
edited Jan 4 at 15:40
Brian Tompsett - 汤莱恩
4,2671339104
asked Jan 11 '12 at 21:53
DaveDave
1,40771207377
The the content of the table text or images? Edit: why not sent thewidth:100px;inside thestyle?
– Biotox
Jan 11 '12 at 22:06
1
Usefloat- css-tricks.com/all-about-floats
– My Head Hurts
Jan 11 '12 at 22:12
I added "float:left" into the style attribute I have above, but the overlapping still occurs. What specifically were you referring to? Also, why did you enter your answer in comments?
– Dave
Jan 12 '12 at 14:00
add a comment |
I'm using the latest version of Firefox and Chrome on Win XP. I want to display two tables on the same horizontal plane. However, I'm having a problem. Right now I have:
<table width="100" style="display: inline-block;">
...
</table>
<table width="100" style="display: inline-block;">
...
</table>
However, right now, the two tables overlap because the content of the first table is bigger than 100 pixels. Without changing the width, does anyone know how I can change/add to the styles so that the second table will appear to the right of the first table but clear all of the first table's contents?
css html-table
edited Jan 4 at 15:40
Brian Tompsett - 汤莱恩
4,2671339104
asked Jan 11 '12 at 21:53
DaveDave
1,40771207377
I'm using the latest version of Firefox and Chrome on Win XP. I want to display two tables on the same horizontal plane. However, I'm having a problem. Right now I have:
<table width="100" style="display: inline-block;">
...
</table>
<table width="100" style="display: inline-block;">
...
</table>
However, right now, the two tables overlap because the content of the first table is bigger than 100 pixels. Without changing the width, does anyone know how I can change/add to the styles so that the second table will appear to the right of the first table but clear all of the first table's contents?
css html-table
css html-table
edited Jan 4 at 15:40
Brian Tompsett - 汤莱恩
4,2671339104
asked Jan 11 '12 at 21:53
DaveDave
1,40771207377
edited Jan 4 at 15:40
Brian Tompsett - 汤莱恩
4,2671339104
asked Jan 11 '12 at 21:53
DaveDave
1,40771207377
edited Jan 4 at 15:40
Brian Tompsett - 汤莱恩
4,2671339104
edited Jan 4 at 15:40
Brian Tompsett - 汤莱恩
4,2671339104
edited Jan 4 at 15:40
Brian Tompsett - 汤莱恩
4,2671339104
4,2671339104
asked Jan 11 '12 at 21:53
DaveDave
1,40771207377
asked Jan 11 '12 at 21:53
DaveDave
1,40771207377
asked Jan 11 '12 at 21:53
DaveDave
1,40771207377
1,40771207377
The the content of the table text or images? Edit: why not sent thewidth:100px;inside thestyle?
– Biotox
Jan 11 '12 at 22:06
1
Usefloat- css-tricks.com/all-about-floats
– My Head Hurts
Jan 11 '12 at 22:12
I added "float:left" into the style attribute I have above, but the overlapping still occurs. What specifically were you referring to? Also, why did you enter your answer in comments?
– Dave
Jan 12 '12 at 14:00
add a comment |
The the content of the table text or images? Edit: why not sent thewidth:100px;inside thestyle?
– Biotox
Jan 11 '12 at 22:06
1
Usefloat- css-tricks.com/all-about-floats
– My Head Hurts
Jan 11 '12 at 22:12
I added "float:left" into the style attribute I have above, but the overlapping still occurs. What specifically were you referring to? Also, why did you enter your answer in comments?
– Dave
Jan 12 '12 at 14:00
The the content of the table text or images? Edit: why not sent the
width:100px; inside the style?– Biotox
Jan 11 '12 at 22:06
The the content of the table text or images? Edit: why not sent the
width:100px; inside the style?– Biotox
Jan 11 '12 at 22:06
1
1
Use
float - css-tricks.com/all-about-floats– My Head Hurts
Jan 11 '12 at 22:12
Use
float - css-tricks.com/all-about-floats– My Head Hurts
Jan 11 '12 at 22:12
I added "float:left" into the style attribute I have above, but the overlapping still occurs. What specifically were you referring to? Also, why did you enter your answer in comments?
– Dave
Jan 12 '12 at 14:00
I added "float:left" into the style attribute I have above, but the overlapping still occurs. What specifically were you referring to? Also, why did you enter your answer in comments?
– Dave
Jan 12 '12 at 14:00
add a comment |
2 Answers
2
active
oldest
votes
In principle you could just set overflow: hidden on the first table, but IE (even IE 9) does not implement it properly in this case. The workaround is to wrap your tables in div elements and set the relevant properties on them:
<style>
.tablediv { display: inline-block; width: 100px; overflow: hidden }
</style>
<div class=tablediv>
<table>
...
</table>
<div class=tablediv>
<table>
...
</table>
This way, the content in one of the tables that does not fit into the allocated width is complete absent from the rendering. So it might be more effective than desired, but the question was not quite clear in this respect.
answered Jan 12 '12 at 14:35
Jukka K. KorpelaJukka K. Korpela
154k25191298
add a comment |
If you are sure the first table never is wider than 100 pixels, you can leave the first table as is and give the second table an absolute position.
Don't change the display property, it will disrupt things.
answered Jan 12 '12 at 14:43
Mr ListerMr Lister
35.6k1078121
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f8827220%2fhow-do-i-line-up-two-tables-without-having-their-content-overlap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
In principle you could just set overflow: hidden on the first table, but IE (even IE 9) does not implement it properly in this case. The workaround is to wrap your tables in div elements and set the relevant properties on them:
<style>
.tablediv { display: inline-block; width: 100px; overflow: hidden }
</style>
<div class=tablediv>
<table>
...
</table>
<div class=tablediv>
<table>
...
</table>
This way, the content in one of the tables that does not fit into the allocated width is complete absent from the rendering. So it might be more effective than desired, but the question was not quite clear in this respect.
answered Jan 12 '12 at 14:35
Jukka K. KorpelaJukka K. Korpela
154k25191298
add a comment |
In principle you could just set overflow: hidden on the first table, but IE (even IE 9) does not implement it properly in this case. The workaround is to wrap your tables in div elements and set the relevant properties on them:
<style>
.tablediv { display: inline-block; width: 100px; overflow: hidden }
</style>
<div class=tablediv>
<table>
...
</table>
<div class=tablediv>
<table>
...
</table>
This way, the content in one of the tables that does not fit into the allocated width is complete absent from the rendering. So it might be more effective than desired, but the question was not quite clear in this respect.
answered Jan 12 '12 at 14:35
Jukka K. KorpelaJukka K. Korpela
154k25191298
add a comment |
In principle you could just set overflow: hidden on the first table, but IE (even IE 9) does not implement it properly in this case. The workaround is to wrap your tables in div elements and set the relevant properties on them:
<style>
.tablediv { display: inline-block; width: 100px; overflow: hidden }
</style>
<div class=tablediv>
<table>
...
</table>
<div class=tablediv>
<table>
...
</table>
This way, the content in one of the tables that does not fit into the allocated width is complete absent from the rendering. So it might be more effective than desired, but the question was not quite clear in this respect.
answered Jan 12 '12 at 14:35
Jukka K. KorpelaJukka K. Korpela
154k25191298
In principle you could just set overflow: hidden on the first table, but IE (even IE 9) does not implement it properly in this case. The workaround is to wrap your tables in div elements and set the relevant properties on them:
<style>
.tablediv { display: inline-block; width: 100px; overflow: hidden }
</style>
<div class=tablediv>
<table>
...
</table>
<div class=tablediv>
<table>
...
</table>
This way, the content in one of the tables that does not fit into the allocated width is complete absent from the rendering. So it might be more effective than desired, but the question was not quite clear in this respect.
answered Jan 12 '12 at 14:35
Jukka K. KorpelaJukka K. Korpela
154k25191298
answered Jan 12 '12 at 14:35
Jukka K. KorpelaJukka K. Korpela
154k25191298
answered Jan 12 '12 at 14:35
Jukka K. KorpelaJukka K. Korpela
154k25191298
answered Jan 12 '12 at 14:35
Jukka K. KorpelaJukka K. Korpela
154k25191298
154k25191298
add a comment |
add a comment |
If you are sure the first table never is wider than 100 pixels, you can leave the first table as is and give the second table an absolute position.
Don't change the display property, it will disrupt things.
answered Jan 12 '12 at 14:43
Mr ListerMr Lister
35.6k1078121
add a comment |
If you are sure the first table never is wider than 100 pixels, you can leave the first table as is and give the second table an absolute position.
Don't change the display property, it will disrupt things.
answered Jan 12 '12 at 14:43
Mr ListerMr Lister
35.6k1078121
add a comment |
If you are sure the first table never is wider than 100 pixels, you can leave the first table as is and give the second table an absolute position.
Don't change the display property, it will disrupt things.
answered Jan 12 '12 at 14:43
Mr ListerMr Lister
35.6k1078121
If you are sure the first table never is wider than 100 pixels, you can leave the first table as is and give the second table an absolute position.
Don't change the display property, it will disrupt things.
answered Jan 12 '12 at 14:43
Mr ListerMr Lister
35.6k1078121
answered Jan 12 '12 at 14:43
Mr ListerMr Lister
35.6k1078121
answered Jan 12 '12 at 14:43
Mr ListerMr Lister
35.6k1078121
answered Jan 12 '12 at 14:43
Mr ListerMr Lister
35.6k1078121
35.6k1078121
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f8827220%2fhow-do-i-line-up-two-tables-without-having-their-content-overlap%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The the content of the table text or images? Edit: why not sent the
width:100px;inside thestyle?– Biotox
Jan 11 '12 at 22:06
1
Use
float- css-tricks.com/all-about-floats– My Head Hurts
Jan 11 '12 at 22:12
I added "float:left" into the style attribute I have above, but the overlapping still occurs. What specifically were you referring to? Also, why did you enter your answer in comments?
– Dave
Jan 12 '12 at 14:00