html - 如何让表格的列宽固定？

Question

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

style="width:30%;"

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

这是我 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>

Answer 1

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

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

然后 30% 单元格的 HTML 看起来像:

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