为什么在指定＆＃39; width＆＃39;时会出现错误的值？在＆＃39; tr＆＃39;？

Question

我已经分配了25px＆＃39;到＆＃39; tr＆＃39;在这张照片中，但实际页面上有29张。

我发现了＆＃39; border＆＃39;在css中左右移动，并添加2px。

我想知道为什么当它成为＆＃39; 27px＆＃39;时会应用2px？即使它这样做了。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>