如何使表格的列宽固定？

I want to make the first column to have a fixed width same as the second column by using the following CSS style:

我想通过使用以下CSS样式使第一列具有与第二列相同的固定宽度：

style="width:30%;"

风格= “宽度：30％;”

However, every time I put long text on the column, the width still moves. Here's my code:

但是，每次我在列上放置长文本时，宽度仍会移动。这是我的代码：

This one's the content of my body:

这是我身体的内容：

    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">
	<h1 class="permissiontitle">Permission List</h1>
	<div class="table-main panel panel-default">
		<table class="table table-hover">
			<tr class="theader">
				<th>Title</th>
				<th>Description</th>
			</tr>
			<tr>
				<td style="width:30%;">Sample Title asdasdasdasdasdasdasdadasdasdasdasdadasdasda</td>
				<td style="width:70%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
			<tr>
				<td>Content 1</td>
				<td>Content 2</td>
			</tr>
		</table>
		</div>
</div>

3 个解决方案

#1

The browser can ignore these values to try and give you a better outcome. You might want to set min-width and max-width to tray and make it more clear to the browser what you are trying to achieve. Plus you can add the important flag to try for encourage the browser to pay attention. Hence it might look like:

浏览器可以忽略这些值来尝试并为您提供更好的结果。您可能希望将最小宽度和最大宽度设置为托盘，并使浏览器更清楚您要实现的目标。另外，您可以添加重要标志，以鼓励浏览器注意。因此它可能看起来像：

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

Then the HTML for the 30% cell would look like:

那么30％单元格的HTML看起来像：

<td class='td-30'>Sample Title asdasdasdasdasdasdasdadasdasdasdasdadasdasda</td>

#2

add the style to your table, make the word breakline.

将样式添加到表中，使单词分隔线。

.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;
    }

	


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

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

#3

.thirthy{
width: 30%;
min-width: 30%;
max-width: 30%;
}

The HTML of the <td>looks like this:

的HTML如下所示：

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

This could be an option too:

这也是一个选择：

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