html - 为什么在 'width' 中指定 'tr' 时会得到错误的值？

Question

我在这张照片中将“25px”分配给“tr”，但在实际页面上分配了 29。

我发现'border'在css中左右移动，并添加了2px。

我想知道为什么当它变成“27px”时应用 2px，即使它这样做了。

下面的代码显示了图片中显示的代码。

.div_result {
    overflow-y: hidden;
	width: 766px;
	height: 250px;
	overflow-x: auto;
	border: 1px solid #dbdbdb;
}

table.scroll {
	width: 150%;
	border-spacing: 0;
}

table.scroll tbody,
table.scroll thead {
	display: block;
}

thead tr th {
	height: 30px;

}

table.scroll tbody {
	height: 100px;
	overflow-y: auto;
	overflow-x: hidden;
}

tbody td,
thead th {
	border: 1px solid black;
}

tbody td:last-child,
thead th:last-child {}

thead tr {
	display: inline-table;
	width: 100%;
}

th {
	background-color: red;
}

<div class="div_result  " style="position:relative;">
	<table id="" class="scroll">
		<thead class="sorted_head">
			<tr>
				<th id="" class="result_title " width="25">
					<span class="some-handle">a</span>
				</th>
				<th id="" class="result_title " width="120">
					<span class="some-handle">a</span>
				</th>
				<th id="" class="result_title " width="250">
					<span class="some-handle">a</span>
				</th>
				<th class="result_title ">
					<span class="some-handle">a</span>
				</th>
			</tr>
		</thead>
		<tbody class="sort_body">
			<tr>
				<td style="padding: 0;width: 25px;">asd</td>
				<td style="width: 120px;">asd</td>
				<td style="width: 250px;">asd</td>
				<td style="width: 738px;">asd</td>
			</tr>
			<tr>
				<td>asd</td>
				<td>asd</td>
				<td>asd</td>
				<td>asd</td>
			</tr>
			<tr>
				<td>asd</td>
				<td>asd</td>
				<td>asd</td>
				<td>asd</td>
			</tr>
			<tr>
				<td>asd</td>
				<td>asd</td>
				<td>asd</td>
				<td>asd</td>
			</tr>
		</tbody>
	</table>
</div>

Answer 1

CSS 表格将根据第一 行自动调整其列的间距。您还需要 table {table-layout: fixed} 才能工作:

$(document).ready(function () {
  console.log($('table td:first').outerWidth());
})

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

td {
  box-sizing: border-box;
  height: 25px;
  border: 1px solid white;
  background-color: blue;
}

td:first-child {
  width: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
  <tr><td></td><td></td></tr>
</table>