sammy001 sammy001 - 4 months ago 9
HTML Question

Not able to fit the table within the box

I have a place card that displays image and a name and few more details, I have placed a table within this box that displays few data within it, but there are few issues that i am not able to fix

1) if i put more data in the table then it is going outside the box(as shown in the image below). How should i place the box so that it should stay within the box. if text is long it should shift to next line but should remain in the same column, should not go below skills i.e should start just below PHP

enter image description here

2) i want to apply css to first column, eg in this case i wish to apply css to exp, rating, location, domain and skill

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="box">
<div class="box-icon">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
</div>
<div class="info">
<h4 class="text-center">John Doe</h4>
<table class="table table-striped">
<tbody>
<tr>
<td>Exp</td>
<td>1 Years</td>
</tr>
<tr>
<td>Rating</td>
<td>*****</td>
</tr>
<tr>
<td>Location</td>
<td>UK</td>
</tr>
<tr>
<td>Domain</td>
<td>IT</td>
</tr>
<tr>
<td>Skills</td>
<td>PHP,javascript,jquery,html,css</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>


Css Code

.box {
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 10px 25px;
text-align: right;
display: block;
margin-top: 60px;
}
.box-icon {
background-color: #57a544;
border-radius: 50%;
display: table;
height: 100px;
margin: 0 auto;
width: 100px;
margin-top: -61px;
}

.box-icon img
{
border-radius: 50%;
height: 100px;
width: 100px;
}
.box-icon span {
color: #fff;
display: table-cell;
text-align: center;
vertical-align: middle;
}

.info .table
{
text-align: initial;
}

Answer

change this .table { /* width: 100%; */ /* max-width: 100%; */ margin-bottom: 20px; }

i will make it fit in box

or you can use

<div class="table-responsive"> <table class="table"> ... </table> </div> it will make extra table width to scroll

Comments