Question

我想通过使用以下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">
	<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

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

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

然后30％单元格的HTML看起来像：

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

Answer 2

将样式添加到您的表格中，制作单词分隔线。

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

Answer 3

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

如何使表的列宽固定？

3 个答案: