IE Move table cells to new line if max width reached
2
I have a problem with Internet Explorer 11 and moving table cells to new line if table reaches 100% width.
Opera / Chrome / Mozilla works fine.
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: inline-block
.atAndUTable td
display: -webkit-inline-box;
margin-left: 5px;
<div class="col-md-12" id="AT">
<table class="atAndUTable" style="">
<tbody>
<tr>
<td>
<label class="control-label" for="AT">AT :</label>
</td>
</tr>
</tbody>
</table>
</div>What I dont want to apply is table-fixed. Tried many variants, none of them is working. Any help please ? Look at the picture - after 19 there is also 20,21,22,23 - in chrome / opera / mozilla it moves to the second line but in IE11 it simply wont, just overflows.
html css internet-explorer-11
edited Nov 14 '18 at 13:16
Jamie Barker
6,69611848
asked Nov 14 '18 at 13:12
marhynomarhyno
322413
add a comment |
2
I have a problem with Internet Explorer 11 and moving table cells to new line if table reaches 100% width.
Opera / Chrome / Mozilla works fine.
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: inline-block
.atAndUTable td
display: -webkit-inline-box;
margin-left: 5px;
<div class="col-md-12" id="AT">
<table class="atAndUTable" style="">
<tbody>
<tr>
<td>
<label class="control-label" for="AT">AT :</label>
</td>
</tr>
</tbody>
</table>
</div>What I dont want to apply is table-fixed. Tried many variants, none of them is working. Any help please ? Look at the picture - after 19 there is also 20,21,22,23 - in chrome / opera / mozilla it moves to the second line but in IE11 it simply wont, just overflows.
html css internet-explorer-11
edited Nov 14 '18 at 13:16
Jamie Barker
6,69611848
asked Nov 14 '18 at 13:12
marhynomarhyno
322413
add a comment |
2
2
2
I have a problem with Internet Explorer 11 and moving table cells to new line if table reaches 100% width.
Opera / Chrome / Mozilla works fine.
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: inline-block
.atAndUTable td
display: -webkit-inline-box;
margin-left: 5px;
<div class="col-md-12" id="AT">
<table class="atAndUTable" style="">
<tbody>
<tr>
<td>
<label class="control-label" for="AT">AT :</label>
</td>
</tr>
</tbody>
</table>
</div>What I dont want to apply is table-fixed. Tried many variants, none of them is working. Any help please ? Look at the picture - after 19 there is also 20,21,22,23 - in chrome / opera / mozilla it moves to the second line but in IE11 it simply wont, just overflows.
html css internet-explorer-11
edited Nov 14 '18 at 13:16
Jamie Barker
6,69611848
asked Nov 14 '18 at 13:12
marhynomarhyno
322413
I have a problem with Internet Explorer 11 and moving table cells to new line if table reaches 100% width.
Opera / Chrome / Mozilla works fine.
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: inline-block
.atAndUTable td
display: -webkit-inline-box;
margin-left: 5px;
<div class="col-md-12" id="AT">
<table class="atAndUTable" style="">
<tbody>
<tr>
<td>
<label class="control-label" for="AT">AT :</label>
</td>
</tr>
</tbody>
</table>
</div>What I dont want to apply is table-fixed. Tried many variants, none of them is working. Any help please ? Look at the picture - after 19 there is also 20,21,22,23 - in chrome / opera / mozilla it moves to the second line but in IE11 it simply wont, just overflows.
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: inline-block
.atAndUTable td
display: -webkit-inline-box;
margin-left: 5px;
<div class="col-md-12" id="AT">
<table class="atAndUTable" style="">
<tbody>
<tr>
<td>
<label class="control-label" for="AT">AT :</label>
</td>
</tr>
</tbody>
</table>
</div>.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: inline-block
.atAndUTable td
display: -webkit-inline-box;
margin-left: 5px;
<div class="col-md-12" id="AT">
<table class="atAndUTable" style="">
<tbody>
<tr>
<td>
<label class="control-label" for="AT">AT :</label>
</td>
</tr>
</tbody>
</table>
</div>html css internet-explorer-11
html css internet-explorer-11
edited Nov 14 '18 at 13:16
Jamie Barker
6,69611848
asked Nov 14 '18 at 13:12
marhynomarhyno
322413
edited Nov 14 '18 at 13:16
Jamie Barker
6,69611848
asked Nov 14 '18 at 13:12
marhynomarhyno
322413
edited Nov 14 '18 at 13:16
Jamie Barker
6,69611848
edited Nov 14 '18 at 13:16
Jamie Barker
6,69611848
edited Nov 14 '18 at 13:16
Jamie Barker
6,69611848
6,69611848
asked Nov 14 '18 at 13:12
marhynomarhyno
322413
asked Nov 14 '18 at 13:12
marhynomarhyno
322413
asked Nov 14 '18 at 13:12
marhynomarhyno
322413
322413
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
You need to change your HTML structure. Then I would suggest using flexbox for what you're trying to do.
.col-md-12
width: 500px;
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
.atAndUTable div
margin-left: 5px;
<div class="col-md-12" id="AT">
<div class="atAndUTable" style="">
<div>
<label class="control-label" for="AT">AT :</label>
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
</div>
</div>answered Nov 14 '18 at 13:20
Jamie BarkerJamie Barker
6,69611848
Thanks, worked :) even without flexbox but changing from table to divs and display inline-block worked in IE and all other browsers.
– marhyno
Nov 14 '18 at 14:35
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');
);
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%2f53301067%2fie-move-table-cells-to-new-line-if-max-width-reached%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You need to change your HTML structure. Then I would suggest using flexbox for what you're trying to do.
.col-md-12
width: 500px;
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
.atAndUTable div
margin-left: 5px;
<div class="col-md-12" id="AT">
<div class="atAndUTable" style="">
<div>
<label class="control-label" for="AT">AT :</label>
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
</div>
</div>answered Nov 14 '18 at 13:20
Jamie BarkerJamie Barker
6,69611848
Thanks, worked :) even without flexbox but changing from table to divs and display inline-block worked in IE and all other browsers.
– marhyno
Nov 14 '18 at 14:35
add a comment |
2
You need to change your HTML structure. Then I would suggest using flexbox for what you're trying to do.
.col-md-12
width: 500px;
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
.atAndUTable div
margin-left: 5px;
<div class="col-md-12" id="AT">
<div class="atAndUTable" style="">
<div>
<label class="control-label" for="AT">AT :</label>
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
</div>
</div>answered Nov 14 '18 at 13:20
Jamie BarkerJamie Barker
6,69611848
Thanks, worked :) even without flexbox but changing from table to divs and display inline-block worked in IE and all other browsers.
– marhyno
Nov 14 '18 at 14:35
add a comment |
2
2
2
You need to change your HTML structure. Then I would suggest using flexbox for what you're trying to do.
.col-md-12
width: 500px;
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
.atAndUTable div
margin-left: 5px;
<div class="col-md-12" id="AT">
<div class="atAndUTable" style="">
<div>
<label class="control-label" for="AT">AT :</label>
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
</div>
</div>answered Nov 14 '18 at 13:20
Jamie BarkerJamie Barker
6,69611848
You need to change your HTML structure. Then I would suggest using flexbox for what you're trying to do.
.col-md-12
width: 500px;
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
.atAndUTable div
margin-left: 5px;
<div class="col-md-12" id="AT">
<div class="atAndUTable" style="">
<div>
<label class="control-label" for="AT">AT :</label>
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
</div>
</div>.col-md-12
width: 500px;
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
.atAndUTable div
margin-left: 5px;
<div class="col-md-12" id="AT">
<div class="atAndUTable" style="">
<div>
<label class="control-label" for="AT">AT :</label>
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
</div>
</div>.col-md-12
width: 500px;
.atAndUTable
text-align: left !important;
width: auto;
max-width: 100%;
display: flex;
flex-wrap: wrap;
.atAndUTable div
margin-left: 5px;
<div class="col-md-12" id="AT">
<div class="atAndUTable" style="">
<div>
<label class="control-label" for="AT">AT :</label>
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
<div>
Some content
</div>
</div>
</div>answered Nov 14 '18 at 13:20
Jamie BarkerJamie Barker
6,69611848
edited Nov 14 '18 at 13:35
answered Nov 14 '18 at 13:20
Jamie BarkerJamie Barker
6,69611848
answered Nov 14 '18 at 13:20
Jamie BarkerJamie Barker
6,69611848
answered Nov 14 '18 at 13:20
Jamie BarkerJamie Barker
6,69611848
6,69611848
Thanks, worked :) even without flexbox but changing from table to divs and display inline-block worked in IE and all other browsers.
– marhyno
Nov 14 '18 at 14:35
add a comment |
Thanks, worked :) even without flexbox but changing from table to divs and display inline-block worked in IE and all other browsers.
– marhyno
Nov 14 '18 at 14:35
Thanks, worked :) even without flexbox but changing from table to divs and display inline-block worked in IE and all other browsers.
– marhyno
Nov 14 '18 at 14:35
Thanks, worked :) even without flexbox but changing from table to divs and display inline-block worked in IE and all other browsers.
– marhyno
Nov 14 '18 at 14:35
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');
);
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%2f53301067%2fie-move-table-cells-to-new-line-if-max-width-reached%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
