Francis Francis - 1 month ago 4
CSS Question

trying to place a table inside a bootstrap row but the width of the table jumps across the row

I am trying to place a table inside a bootstrap row but the width of the table keeps jumping across the with of the table. I have added a maximum value of 50% to the width of the table but problem still persists.

this is the css of the table

**EDITTED*****

<div class="col-sm-10" style="min-height:280px">

<div class="panel panel-default">
<div class="panel-body">
<style type="text/css">
table {
max-width: 50%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;

}
.table thead th {
vertical-align: bottom;
}
.table th {
font-weight: bold;
}
.table th, .table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;

}
.table td {
border-top: 1px solid #dddddd;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.table-bordered th, .table-bordered td {
border-left: 1px solid #dddddd;
}
</style>

then in my view i have html implementation of the css code in the jsp page

<c:when test="${messageList != null}">
<c:forEach items="${messageList}" var="mesList">

<div class="row">


<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Message</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>${mesList.message}</td>
<td>${mesList.timestamp}</td>
</tr>
</tbody>
</table>
</div>


</c:forEach>
</c:when>

</div></div></div>


this is the outcome of the above

enter image description here

Please how can I place the table into the div row.

Answer

The class .table is overriding the styles applied to the table tag. Apply your styles to the class .table rather than applying them to the tag table.

When dealing with stylesheet you always have to remember that they are cascading. The styles of a class will override the styles of the tag the class is applied to.

When your css has no effect it pays off to look in the developer tools of the browser. In Chrome, the styles that are being overridden will be marked out.

Comments