如何讓表格垂直擴展櫃面它包含長文本

Question

我上的Asp.net MVC的Web應用程序的工作，我定義的表如下佈局CSS file.-

我裏面建設使用下面的代碼表： -

<div class="box-content"> 
<table class="table table-striped table-bordered bootstrap-datatable datatable"> 
<thead> 
<tr> 
//code goes here 

，我定義了格式化的箱內容相關的CSS文件中的以下內容： -

.box-content{ 
padding:10px; 
} 
.box-content .nav-tabs{ 
margin-right:-10px; 
margin-left:-10px; 
} 
.box-content.buttons{ 
min-height:297px; 
} 

，我定義以下在格式化表格有關的CSS文件中： -

table { 
    max-width: 100%; 
    background-color: transparent; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
.table { 
    width: 100%; 
    margin-bottom: 18px; 
} 
.table th, 
.table td { 
    padding: 8px; 
    line-height: 18px; 
    text-align: left; 
    vertical-align: top; 
    border-top: 1px solid #dddddd; 
} 
.table th { 
    font-weight: bold; 
} 
.table thead th { 
    vertical-align: bottom; 
} 
.table caption + thead tr:first-child th, 
.table caption + thead tr:first-child td, 
.table colgroup + thead tr:first-child th, 
.table colgroup + thead tr:first-child td, 
.table thead:first-child tr:first-child th, 
.table thead:first-child tr:first-child td { 
    border-top: 0; 
} 
.table tbody + tbody { 
    border-top: 2px solid #dddddd; 
} 
.table-condensed th, 
.table-condensed td { 
    padding: 4px 5px; 
} 
.table-bordered { 
    border: 1px solid #dddddd; 
    border-collapse: separate; 
    *border-collapse: collapsed; 
    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; 
} 
.table-bordered caption + thead tr:first-child th, 
.table-bordered caption + tbody tr:first-child th, 
.table-bordered caption + tbody tr:first-child td, 
.table-bordered colgroup + thead tr:first-child th, 
.table-bordered colgroup + tbody tr:first-child th, 
.table-bordered colgroup + tbody tr:first-child td, 
.table-bordered thead:first-child tr:first-child th, 
.table-bordered tbody:first-child tr:first-child th, 
.table-bordered tbody:first-child tr:first-child td { 
    border-top: 0; 
} 
.table-bordered thead:first-child tr:first-child th:first-child, 
.table-bordered tbody:first-child tr:first-child td:first-child { 
    -webkit-border-top-left-radius: 4px; 
    border-top-left-radius: 4px; 
    -moz-border-radius-topleft: 4px; 
} 
.table-bordered thead:first-child tr:first-child th:last-child, 
.table-bordered tbody:first-child tr:first-child td:last-child { 
    -webkit-border-top-right-radius: 4px; 
    border-top-right-radius: 4px; 
    -moz-border-radius-topright: 4px; 
} 
.table-bordered thead:last-child tr:last-child th:first-child, 
.table-bordered tbody:last-child tr:last-child td:first-child { 
    -webkit-border-radius: 0 0 0 4px; 
    -moz-border-radius: 0 0 0 4px; 
    border-radius: 0 0 0 4px; 
    -webkit-border-bottom-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
    -moz-border-radius-bottomleft: 4px; 
} 
.table-bordered thead:last-child tr:last-child th:last-child, 
.table-bordered tbody:last-child tr:last-child td:last-child { 
    -webkit-border-bottom-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
    -moz-border-radius-bottomright: 4px; 
} 
.table-striped tbody tr:nth-child(odd) td, 
.table-striped tbody tr:nth-child(odd) th { 
    background-color: #f9f9f9; 
} 
.table tbody tr:hover td, 
.table tbody tr:hover th { 
    background-color: #f5f5f5; 
} 

但我面臨的問題是，在情況表中包含內部的任何細胞，它會去開箱，內容如下的長文本： -

Answer 1

你可以試試下面的代碼添加到該單元的

word-wrap: break-word; 
display: inline-block; 

小提琴

http://jsfiddle.net/HUNJE/1/

Answer 2

嘗試的CSS規則：

table{ table-layout: fixed;} 
table td{ white-space: normal;} 

這將做到這一點，1。表保存細胞的寬度，你提供的，2 white-space:normal甚至word-wrap: break-word;將迫使文字內容必要時可縫保持列寬。