时间戳

首页 > 解决方案 > 确切的列宽

jquery - 确切的列宽

问题描述

我尝试使用 jQuery 构建一个表。该表应具有精确宽度的列。

假设第一列的宽度应该正好是 100 像素，包括填充（每边 10 像素）。我尝试了许多函数width()和的组合innerWidth()，但我将描述两种尝试：

  1. 我创建 td 和 set td1.width(100);。然后函数td1.width()返回 120 像素，函数td1.innerWidth()返回 140 像素。根据 Firefox 控制台的列宽是 140 像素。

  2. 我创建 td 和 set td1.innerWidth(100);。然后函数td1.width()返回 100 像素，函数td1.innerWidth()返回 120 像素。根据 Firefox 控制台的列宽是 120 像素。

为什么函数td1.width(100);以如此奇怪的方式工作？

但主要问题是：是否有可能获得宽度为 100 像素的列？那么设置真正包含填充的宽度？

.js 文件

var bodyTable = $("<table>");
var body = $("<tbody>");
var tr1 = $("<tr>");
var tr2 = $("<tr>");

$("#testTable").append(bodyTable);
bodyTable.append(body);
body.append(tr1);
body.append(tr2);

var td1 = $("<td>foo</td>");
var td2 = $("<td>foo</td>");
var td3 = $("<td>foo</td>");
var td4 = $("<td>foo</td>");
var td5 = $("<td>foo</td>");
var td6 = $("<td>foo</td>");
tr1.append(td1);
tr1.append(td2);
tr1.append(td3);
tr2.append(td4);
tr2.append(td5);
tr2.append(td6);

td1.width(100);
console.log(td1.width(), td1.innerWidth());    //Result: 120 140

td1.innerWidth(100);
console.log(td1.width(), td1.innerWidth());    //Result: 100 120

.css 文件

#testTable td {
  padding:10px;
}

.html 文件

 <div id="testTable"></div>

标签： jquerycss

解决方案

内部宽度的名称可能会让您感到困惑，但实际上，内部宽度是width + padding。你周围有 100px 宽度 + 10px 填充，这使得它的总宽度为 120px（100+10left+10right）。

这张图片是每个宽度，内部宽度等的完整指南......意味着什么。

在此处输入图像描述

现在，在我的代码片段中，您会看到我创建了一个宽度为 100 像素的红色框，而蓝色的框位于红色框中，红色框的填充为 10 像素。但蓝色框仍然是 100 像素，因为红色框变成了 120 像素。还要注意蓝色框没有填充，所以 innerWidth 和 width 都是 100px。

$( document ).ready(function() {
    $(".reddims").append("<p>inner width: " + $(".red").innerWidth() + "</p>");
    $(".reddims").append("<p>width: " + $(".red").width() + "</p>");
    $(".bluedims").append("<p>inner width: " + $(".blue").innerWidth() + "</p>");
    $(".bluedims").append("<p>width: " + $(".blue").width() + "</p>");
    $(".bluedims").append("<p>Because Blue doesn't have paddings.</p>");
});
.red {
width: 100px;
height: 100px;
padding: 10px;
background-color: red;
}
.blue{
background-color: blue;
width: 100%;
height: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="red">
<div class="blue">
</div>
</div>
<div class="reddims">
<p>Red Dimensions are: </p>
</div>
<div class="bluedims">
<p>Blue Dimensions are: <p>
</div>

但最后对于您的情况，您可以这样做。并随心所欲地进行设计。这将使您在设计方面有更多的自由。

var td1 = $("<td class='td1'>foo</td>");
var td2 = $("<td class='td2'>foo</td>");
var td3 = $("<td class='td3'>foo</td>");
var td4 = $("<td class='td4'>foo</td>");
var td5 = $("<td class='td5'>foo</td>");
var td6 = $("<td class='td6'>foo</td>");

我希望这能解释你的问题。

图片来源： https ://www.w3schools.com/jquery/jquery_dimensions.asp

推荐阅读