我想使第一列到具有固定的寬度相同,通過使用下面的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>