Adjust elements inside a table cell
0
I have a table with elements that goes outside a modal:
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
I tried to use word-wrap but it's still the same, and I want to adjust these elements inside that table cell.
MODAL CODE:
<div class="modal fade" id="myModal" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">textextex</h4>
</div>
<div class="modal-body"><table class="table tblTrad_Rev" style="margin-bottom:15px;border: 1px solid #DDD;"><tbody>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textet:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i>image4...JPG</button></a></td></tr>
<tr><td class="text-left">Ltextextex</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;">
<b>textet:</b></td></tr>
<tr><td class="text-left">textextex</td></tr></tbody>
</table></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I fix it ?
I'd like your help.
html css html-table
asked Nov 15 '18 at 18:23
NekoLopezNekoLopez
127111
add a comment |
0
I have a table with elements that goes outside a modal:
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
I tried to use word-wrap but it's still the same, and I want to adjust these elements inside that table cell.
MODAL CODE:
<div class="modal fade" id="myModal" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">textextex</h4>
</div>
<div class="modal-body"><table class="table tblTrad_Rev" style="margin-bottom:15px;border: 1px solid #DDD;"><tbody>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textet:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i>image4...JPG</button></a></td></tr>
<tr><td class="text-left">Ltextextex</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;">
<b>textet:</b></td></tr>
<tr><td class="text-left">textextex</td></tr></tbody>
</table></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I fix it ?
I'd like your help.
html css html-table
asked Nov 15 '18 at 18:23
NekoLopezNekoLopez
127111
1
if you put that code in a fiddle jsfiddle.net/4Lzhnmuy/4 inside a wrapping div you will see it does what you want, so your code above is not enough to troubleshoot as the issue lies in your modal wrapper styles/markup, and how this table code is inside it. maybe that will help you get on the right track.
– Nickfmc
Nov 15 '18 at 18:40
try with overflow:hidden
– Himanshu Ahuja
Nov 15 '18 at 21:17
add a comment |
0
0
0
I have a table with elements that goes outside a modal:
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
I tried to use word-wrap but it's still the same, and I want to adjust these elements inside that table cell.
MODAL CODE:
<div class="modal fade" id="myModal" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">textextex</h4>
</div>
<div class="modal-body"><table class="table tblTrad_Rev" style="margin-bottom:15px;border: 1px solid #DDD;"><tbody>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textet:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i>image4...JPG</button></a></td></tr>
<tr><td class="text-left">Ltextextex</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;">
<b>textet:</b></td></tr>
<tr><td class="text-left">textextex</td></tr></tbody>
</table></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I fix it ?
I'd like your help.
html css html-table
asked Nov 15 '18 at 18:23
NekoLopezNekoLopez
127111
I have a table with elements that goes outside a modal:
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
I tried to use word-wrap but it's still the same, and I want to adjust these elements inside that table cell.
MODAL CODE:
<div class="modal fade" id="myModal" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">textextex</h4>
</div>
<div class="modal-body"><table class="table tblTrad_Rev" style="margin-bottom:15px;border: 1px solid #DDD;"><tbody>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textet:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...JPG</button></a> <a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;margin-bottom:5px;"><i class="fa fa-file-text" aria-hidden="true"></i>image4...JPG</button></a></td></tr>
<tr><td class="text-left">Ltextextex</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;">
<b>textet:</b></td></tr>
<tr><td class="text-left">textextex</td></tr></tbody>
</table></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I fix it ?
I'd like your help.
html css html-table
html css html-table
asked Nov 15 '18 at 18:23
NekoLopezNekoLopez
127111
asked Nov 15 '18 at 18:23
NekoLopezNekoLopez
127111
edited Nov 15 '18 at 21:13
NekoLopez
asked Nov 15 '18 at 18:23
NekoLopezNekoLopez
127111
asked Nov 15 '18 at 18:23
NekoLopezNekoLopez
127111
asked Nov 15 '18 at 18:23
NekoLopezNekoLopez
127111
127111
1
if you put that code in a fiddle jsfiddle.net/4Lzhnmuy/4 inside a wrapping div you will see it does what you want, so your code above is not enough to troubleshoot as the issue lies in your modal wrapper styles/markup, and how this table code is inside it. maybe that will help you get on the right track.
– Nickfmc
Nov 15 '18 at 18:40
try with overflow:hidden
– Himanshu Ahuja
Nov 15 '18 at 21:17
add a comment |
1
if you put that code in a fiddle jsfiddle.net/4Lzhnmuy/4 inside a wrapping div you will see it does what you want, so your code above is not enough to troubleshoot as the issue lies in your modal wrapper styles/markup, and how this table code is inside it. maybe that will help you get on the right track.
– Nickfmc
Nov 15 '18 at 18:40
try with overflow:hidden
– Himanshu Ahuja
Nov 15 '18 at 21:17
1
1
if you put that code in a fiddle jsfiddle.net/4Lzhnmuy/4 inside a wrapping div you will see it does what you want, so your code above is not enough to troubleshoot as the issue lies in your modal wrapper styles/markup, and how this table code is inside it. maybe that will help you get on the right track.
– Nickfmc
Nov 15 '18 at 18:40
if you put that code in a fiddle jsfiddle.net/4Lzhnmuy/4 inside a wrapping div you will see it does what you want, so your code above is not enough to troubleshoot as the issue lies in your modal wrapper styles/markup, and how this table code is inside it. maybe that will help you get on the right track.
– Nickfmc
Nov 15 '18 at 18:40
try with overflow:hidden
– Himanshu Ahuja
Nov 15 '18 at 21:17
try with overflow:hidden
– Himanshu Ahuja
Nov 15 '18 at 21:17
add a comment |
1 Answer
1
active
oldest
votes
0
With bootstrap you can handle this behavior.
P.S: I added more entry in the right cell to show you example.
Please see
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Display modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>answered Nov 15 '18 at 19:08
Diz AndrianaDiz Andriana
206
I'm using Bootstrap but it's still the same
– NekoLopez
Nov 15 '18 at 20:27
can you show me your code so I can investigate please ?
– Diz Andriana
Nov 15 '18 at 20:59
I posted the modal code in the question
– NekoLopez
Nov 15 '18 at 21:14
I saw that, and I build my code from your code. You can see that if you run the snippet I made above. I want to see your code structure so I can help you debug your code.
– Diz Andriana
Nov 15 '18 at 21:31
@NekoLopez, no response.. Did my post helped you?
– Diz Andriana
Nov 23 '18 at 9:12
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%2f53325711%2fadjust-elements-inside-a-table-cell-td%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
0
With bootstrap you can handle this behavior.
P.S: I added more entry in the right cell to show you example.
Please see
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Display modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>answered Nov 15 '18 at 19:08
Diz AndrianaDiz Andriana
206
I'm using Bootstrap but it's still the same
– NekoLopez
Nov 15 '18 at 20:27
can you show me your code so I can investigate please ?
– Diz Andriana
Nov 15 '18 at 20:59
I posted the modal code in the question
– NekoLopez
Nov 15 '18 at 21:14
I saw that, and I build my code from your code. You can see that if you run the snippet I made above. I want to see your code structure so I can help you debug your code.
– Diz Andriana
Nov 15 '18 at 21:31
@NekoLopez, no response.. Did my post helped you?
– Diz Andriana
Nov 23 '18 at 9:12
add a comment |
0
With bootstrap you can handle this behavior.
P.S: I added more entry in the right cell to show you example.
Please see
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Display modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>answered Nov 15 '18 at 19:08
Diz AndrianaDiz Andriana
206
I'm using Bootstrap but it's still the same
– NekoLopez
Nov 15 '18 at 20:27
can you show me your code so I can investigate please ?
– Diz Andriana
Nov 15 '18 at 20:59
I posted the modal code in the question
– NekoLopez
Nov 15 '18 at 21:14
I saw that, and I build my code from your code. You can see that if you run the snippet I made above. I want to see your code structure so I can help you debug your code.
– Diz Andriana
Nov 15 '18 at 21:31
@NekoLopez, no response.. Did my post helped you?
– Diz Andriana
Nov 23 '18 at 9:12
add a comment |
0
0
0
With bootstrap you can handle this behavior.
P.S: I added more entry in the right cell to show you example.
Please see
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Display modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>answered Nov 15 '18 at 19:08
Diz AndrianaDiz Andriana
206
With bootstrap you can handle this behavior.
P.S: I added more entry in the right cell to show you example.
Please see
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Display modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Display modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Display modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table" style="margin-bottom:15px;border: 1px solid #DDD;">
<tbody><tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td><td rowspan="4" style="border-left: 1px solid #DDD;"><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image1...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image2...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image3...jpeg</button></a><a target="_blank" href="https://cdn.filestackcontent.com/EcTpuSWRqaePaBBdvK3A"><button type="button" class="btn btn-default btn-sm" style="margin-right:5px;"><i class="fa fa-file-text" aria-hidden="true"></i> image4...jpeg</button></a></td></tr>
<tr><td class="text-left">textextext</td></tr>
<tr><td class="text-left" style="color: #FFF;background: #73879C;"><b>textextext:</b></td></tr>
<tr><td class="text-left">textextext</td></tr>
</tbody></table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>answered Nov 15 '18 at 19:08
Diz AndrianaDiz Andriana
206
answered Nov 15 '18 at 19:08
Diz AndrianaDiz Andriana
206
answered Nov 15 '18 at 19:08
Diz AndrianaDiz Andriana
206
answered Nov 15 '18 at 19:08
Diz AndrianaDiz Andriana
206
206
I'm using Bootstrap but it's still the same
– NekoLopez
Nov 15 '18 at 20:27
can you show me your code so I can investigate please ?
– Diz Andriana
Nov 15 '18 at 20:59
I posted the modal code in the question
– NekoLopez
Nov 15 '18 at 21:14
I saw that, and I build my code from your code. You can see that if you run the snippet I made above. I want to see your code structure so I can help you debug your code.
– Diz Andriana
Nov 15 '18 at 21:31
@NekoLopez, no response.. Did my post helped you?
– Diz Andriana
Nov 23 '18 at 9:12
add a comment |
I'm using Bootstrap but it's still the same
– NekoLopez
Nov 15 '18 at 20:27
can you show me your code so I can investigate please ?
– Diz Andriana
Nov 15 '18 at 20:59
I posted the modal code in the question
– NekoLopez
Nov 15 '18 at 21:14
I saw that, and I build my code from your code. You can see that if you run the snippet I made above. I want to see your code structure so I can help you debug your code.
– Diz Andriana
Nov 15 '18 at 21:31
@NekoLopez, no response.. Did my post helped you?
– Diz Andriana
Nov 23 '18 at 9:12
I'm using Bootstrap but it's still the same
– NekoLopez
Nov 15 '18 at 20:27
I'm using Bootstrap but it's still the same
– NekoLopez
Nov 15 '18 at 20:27
can you show me your code so I can investigate please ?
– Diz Andriana
Nov 15 '18 at 20:59
can you show me your code so I can investigate please ?
– Diz Andriana
Nov 15 '18 at 20:59
I posted the modal code in the question
– NekoLopez
Nov 15 '18 at 21:14
I posted the modal code in the question
– NekoLopez
Nov 15 '18 at 21:14
I saw that, and I build my code from your code. You can see that if you run the snippet I made above. I want to see your code structure so I can help you debug your code.
– Diz Andriana
Nov 15 '18 at 21:31
I saw that, and I build my code from your code. You can see that if you run the snippet I made above. I want to see your code structure so I can help you debug your code.
– Diz Andriana
Nov 15 '18 at 21:31
@NekoLopez, no response.. Did my post helped you?
– Diz Andriana
Nov 23 '18 at 9:12
@NekoLopez, no response.. Did my post helped you?
– Diz Andriana
Nov 23 '18 at 9:12
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%2f53325711%2fadjust-elements-inside-a-table-cell-td%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
1
if you put that code in a fiddle jsfiddle.net/4Lzhnmuy/4 inside a wrapping div you will see it does what you want, so your code above is not enough to troubleshoot as the issue lies in your modal wrapper styles/markup, and how this table code is inside it. maybe that will help you get on the right track.
– Nickfmc
Nov 15 '18 at 18:40
try with overflow:hidden
– Himanshu Ahuja
Nov 15 '18 at 21:17