Bootstrap row into td overflows - html

Question

I need to insert into a table cell (TD) a bootstrap panel, like this:
<tr>
<td>
......Here the panel......
</td>
</tr>
The panel can stays over others divs (like calendar appointment). To do it, I declared the table with relative position and the note with absolute position.
It works if I insert the panel directly into the TD element, like this:
https://jsfiddle.net/0kktvptj/
But if I insert it into Bootstrap grid class as row and col-sm-12, the panel overflows 30px on the right, like this: http://jsfiddle.net/r0L71dbv/.
I don't understand why it happens and how can I resolve the problem.

Answer 1

I'm not sure I understand what you want. Anyway, tables have problems with position:relative. When you want to use it on a td, make a div inside the td with width: 100%;height:100%;position:relative; and it works.
Is this what you wanted?
.note {
width: 100%;
float: left;
}
table.table-bordered.calendario td {
padding: 0;
width: 33.33%;
height: 50px;
}
table.table-bordered.calendario td .row {
display: inline-block;
max-height: 45px;
width: calc(100% + 30px);
position: relative;
}
td .row .panel {
border-radius: 0 0 4px 4px;
}
td .row .panel-heading {
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered calendario" style="margin-top: 20px;">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-success note">
<div class="panel-heading">Titolo</div>
<div class="panel-body">
Austin next level tilde, pug mlkshk actually helvetica banjo truffaut
sartorial drinking vinegar mumblecore kogi. Franzen microdosing vegan,
kale chips chillwave cliche beard.</div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
</table>

Answer 2

A row should always be a child of a container or a column. The Bootstrap team make this clear in the docs. Define your layout structure, then drop in the content.
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered calendario" style="margin-top: 20px;">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<div class="panel panel-success note " style="height: 50px; overflow: scroll; overflow-x: hidden;">
<div class="panel-heading">Titolo</div>
<div class="panel-body" style="overflow: hidden">Corpo del testo</div>
</div>
</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
Demo

Answer 3

I applied this solution: https://jsfiddle.net/rr6ju1no/1/
table.table-bordered.calendario td
{
padding: 0;
height: 50px;
position: relative;
}
table.table-bordered.calendario td .row
{
width: 100%;
}
table.table-bordered.calendario td .panel
{
overflow: scroll;
overflow-x: hidden;
border-radius: 0 0 4px 4px;
}
td .row .panel-heading {
border-radius: 1px;
}
.note
{
position:absolute;
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered calendario" style="margin-top: 20px;">
<tr><td></td><td></td><td></td></tr>
<tr>
<td></td>
<td>
<div class="row">
<div class="col-sm-12">
<div class="panel panel-success note " style="height: 50px;">
<div class="panel-heading">Titolo</div>
<div class="panel-body">Corpo del testo</div>
</div>
</div>
</div>
</td>
<td></td>
</tr>
</table>
When you resize the browser, columns maintain the same width better.