我在这张照片中将“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>
最佳答案
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>
关于html - 为什么在 'width' 中指定 'tr' 时会得到错误的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43224947/