on bootstrap table column expand strangely - css

Question

I have a table and ,in the note column , i should add long note that area. When i add very long note, the line expand but i just want to note settle new lines.
Example :
asyufgasdfhjdasfghfghasfhaahjfsghjahfjqjwjefqfeqwhkfwq
I want this :
jdsaaafjasasjs
ywewyuwqfyuyew
quyduquyqewfyy
And my table's code : (I want to fix td with 'thisone' id)
<div class="col-md-6">
<div class="content-box-large">
<div class="panel-heading">
<div class="panel-title">Notlar</div>
<div class="panel-options">
<i class="glyphicon glyphicon-refresh"></i>
<i class="glyphicon glyphicon-cog"></i>
</div>
</div>
<div class="panel-body">
<table class="table table-striped">
<?php if(mysqli_num_rows($listele)>0)
{ ?>
<thead>
<tr>
<th>Tarih</th>
<th>Saat</th>
<th>Dosya Notu</th>
<th>Notu Kaydeden Kişi</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
while($not=mysqli_fetch_array($listele))
{
$tarih=$not["tarih"];
?>
<tr>
<td><?php echo date("d/m/Y",strtotime($tarih)); ?></td>
<td><?php echo date("H:i",strtotime($tarih)); ?></td>
<td id="thisone"><?php echo $not["dosya_not"]; ?></td>
<td><?php echo $not["calisan_adi"]; ?></td>
</tr>
<?php
$i++;
}
}?>
</tbody>
</table>
</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<td><input type="hidden" id="musteri_id" value="<?php echo $musteri_id; ?>"></td>
<td id="not"><textarea class="form-control" id="not_degeri" placeholder="Notu Giriniz" rows="3"></textarea></td>
<td id="buton"><button class="btn btn-primary" id="ekle">Yeni Not Ekle</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</di
v>

Answer 1

You can use word breaking option in CSS
td {
word-break: break-all;
}
<style>
td { word-break: break-all; }
</style>
<div class="col-md-6">
<div class="content-box-large">
<div class="panel-heading">
<div class="panel-title">Notlar</div>
<div class="panel-options">
<i class="glyphicon glyphicon-refresh"></i>
<i class="glyphicon glyphicon-cog"></i>
</div>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Tarih</th>
<th>Saat</th>
<th>Dosya Notu</th>
<th>Notu Kaydeden Kişi</th>
</tr>
</thead>
<tbody>
<tr>
<td>sometext</td>
<td>some text</td>
<td id="thisone">lsdfjasdklfjasldajklsdfjkldfjklafsjklasdfjlkasdfjklafjklasdfjhklasdfjhklasdfjhklasdfajklasdfjklasdfjkl</td>
<td>some text</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<td><input type="hidden" id="musteri_id" value=""></td>
<td id="not"><textarea class="form-control" id="not_degeri" placeholder="Notu Giriniz" rows="3"></textarea></td>
<td id="buton"><button class="btn btn-primary" id="ekle">Yeni Not Ekle</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>