how to make block inside table responsive?
Multi tool use
how to make block inside table responsive?
I am working on bootstrap.i wanted to make block inside table responsive.
As i resize the browser,block(bluebox) inside table is not adjusting according to screen size.i am new to bootstrap.Any help will be highly appreciated.
Please dont downvote.
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
min-width:267px;
width:100%;
display:block;
overflow:auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
</head>
<body>
Link us
</div>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">To link to us, please choose and save one of the logos displayed below, and link it to ' http://www.dubaiexporters.com '.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">As per our linking Policy, no prior permission is required to link 'DubaiExporters.com' from your website. However, we would like you to inform us (using the 'Contact us' option) about any links provided to this Portal so that you can be informed of any changes or updates.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">We encourage you to choose from the following graphic banners which can be conveniently placed on your website and linked to our Portal.</p>
<p><b style="color: #339933;padding-left:18px; font-size:20px;">Banners for Download </b></p>
<table class="table table-bordered" style="margin-left:18px;">
<thead>
<tr>
<th>Banner</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="images/dubaiexportersbanners/dubaiexporters_168x72.gif" target="_blank"><img src="images/dubaiexportersbanners/dubaiexporters_168x72.gif" alt="dubaiexporters.com 130x38 jpg" width="168" height="72"></a>
</td>
<td>
<a href="http://www.dubaiexporters.com/"><img src="http://www.dubaiexporters.com/images/dubaiexporters_168x72.gif" border="0" alt="Dubai Exporters - Directory of Exporters, Manufacturers & Suppliers" /></a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Link: https://jsfiddle.net/1h0bt35f/4/
You are limiting your
.bluebox by giving width:267px; try: width:100%... Also have a look on css-tricks.com/snippets/css/a-guide-to-flexbox– caiovisk
Jul 3 at 5:50
.bluebox
width:267px;
width:100%
i tried that...jsfiddle.net/1h0bt35f/4
– chetan kambli
Jul 3 at 6:52
2 Answers
2
Update: Add word-break: break-all; to the CSS class.
word-break: break-all;
Also, you would need to define width in percentage in order to make it responsive.
Currently, you have given bluebox a width of 267px.
Try the below code where you can set a min-width of 267px and it will handle automatically when it scales due to width as 100%.
.bluebox {
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow: hidden;
width: 100%;
display: block;
overflow: auto;
word-break: break-all;
}
i tried this but i am getting the same result..when i resize it,the right side border of the table is not getting visible..even same with the border of bluebox...
– chetan kambli
Jul 3 at 6:23
Can you please create a sample app so that we can discuss more?
– Ankit Sharma
Jul 3 at 6:24
jsfiddle.net/1h0bt35f/4
– chetan kambli
Jul 3 at 6:42
check the above link(jsfiddle)
– chetan kambli
Jul 3 at 6:43
I have further updated the code. jsfiddle.net/1h0bt35f/12 , have added a property to bluebox to break words in order to wrap the contents. Let me know if it solves the issue now.
– Ankit Sharma
Jul 3 at 7:19
Try this:
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
width: 26%;
display:block;
overflow:auto;
}
Giving a width of 267% will make the box overflow and it will eventually hide the contents of the box.
– Ankit Sharma
Jul 3 at 6:03
@Mandar the border of the bluebox is going out from the border of the table...i wanted to make the border of the blubox responsive as browser resizes
– chetan kambli
Jul 3 at 6:13
i have updated my answer please check
– Mandar Dhadve
Jul 3 at 6:59
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
It would be better to use Media objects instead of table.
– Alexander
Jul 3 at 5:48