2016-11-29 78 views
2

我想使第一列到具有固定的寬度相同,通過使用下面的CSS樣式的第二列:如何使表格的列寬固定?

風格=「寬度:30%;」

但是,每當我在列上放置長文本時,寬度仍會移動。這裏是我的代碼:

這一個是我身體的內容:

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    } 
 
    td, th { 
 
    text-align: left; 
 
    padding: 8px; 
 
    } 
 
    .theader{ 
 
    color:#91BE24; 
 
    } 
 
    .table-main{ 
 
    border-radius: 10px; 
 
    margin:40px; 
 
    padding:10px; 
 
    margin-left:20px; 
 
    margin-top:5px; 
 
    } 
 
    .permissiontitle{ 
 
    margin-left:20px; 
 
    margin-top:20px; 
 
    }
<div class="container d-content"> 
 
\t <h1 class="permissiontitle">Permission List</h1> 
 
\t <div class="table-main panel panel-default"> 
 
\t \t <table class="table table-hover"> 
 
\t \t \t <tr class="theader"> 
 
\t \t \t \t <th>Title</th> 
 
\t \t \t \t <th>Description</th> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td style="width:30%;">Sample Title asdasdasdasdasdasdasdadasdasdasdasdadasdasda</td> 
 
\t \t \t \t <td style="width:70%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t \t </div> 
 
</div>

回答

0

樣式添加到您的表格,使字特徵線。

.breaked { 
    word-break: break-all; 
} 

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    } 
 
    td, th { 
 
    text-align: left; 
 
    padding: 8px; 
 
    } 
 
    .theader{ 
 
    color:#91BE24; 
 
    } 
 
    .table-main{ 
 
    border-radius: 10px; 
 
    margin:40px; 
 
    padding:10px; 
 
    margin-left:20px; 
 
    margin-top:5px; 
 
    } 
 
    .permissiontitle{ 
 
    margin-left:20px; 
 
    margin-top:20px; 
 
    } 
 

 
\t 
 

 

 
.breaked { 
 
    word-break: break-all; 
 
}
<div class="container d-content"> 
 
\t <h1 class="permissiontitle">Permission List</h1> 
 
\t <div class="table-main panel panel-default"> 
 
\t \t <table class="table table-hover breaked"> 
 
\t \t \t <tr class="theader"> 
 
\t \t \t \t <th>Title</th> 
 
\t \t \t \t <th>Description</th> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td style="width:30%;">Sample Title asdasdasdasdasdasdasdadasdasdasdasdadasdasda</td> 
 
\t \t \t \t <td style="width:70%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Content 1</td> 
 
\t \t \t \t <td>Content 2</td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t \t </div> 
 
</div>

1

的瀏覽器可以忽略這些值來嘗試給你一個更好的結果。您可能需要將最小寬度和最大寬度設置爲托盤,並使瀏覽器更清楚您要實現的目標。此外,您可以添加重要的標誌,以鼓勵瀏覽器注意。因此,它可能看起來像:

.td-30 { 
    width: 30% !important; 
    min-width: 30% !important; 
    max-width: 30% !important; 
} 

那麼對於30%的細胞產生的HTML代碼如下所示:

<td class='td-30'>Sample Title asdasdasdasdasdasdasdadasdasdasdasdadasdasda</td> 
0
.thirthy{ 
width: 30%; 
min-width: 30%; 
max-width: 30%; 
} 

<td>的HTML看起來像這樣:

<td class='thirthy'>"TEXT"</td> 

這可能也是一個選項:

<td style="width:30%;min-width: 30%; max-width: 30%;">Sample Titleasdasdasdasdasdasdasdadasdasdasdasdadasdasda</td>