Точная ширина столбца

Question

Я пытаюсь построить таблицу, используя jQuery. В таблице должны быть столбцы с точной шириной.

Допустим, ширина первого столбца должна быть ровно 100 пикселей, включая отступы (10 пикселей с каждой стороны). Я перепробовал множество комбинаций функций width() и innerWidth(), но я опишу две попытки:

1. Я создаю td и устанавливаю td1.width(100);. Затем функция td1.width() возвращает 120 пикселей, а функция td1.innerWidth() возвращает 140 пикселей. Ширина столбца в соответствии с консолью Firefox составляет 140 пикселей.

2. Я создаю td и устанавливаю 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>

Answer 1

Имя внутренней ширины может сбить вас с толку, но на самом деле внутренней шириной является width + padding . У вас есть ширина 100px + отступы 10px, что делает его общей шириной 120px (100 + 10left + 10right).

Это изображение - полное руководство о том, что означает каждая ширина, внутренняя ширина и т. Д.

NOW здесь, в моем фрагменте, вы видите, что я создал одну красную коробку шириной 100 пикселей, а синяя - вкрасная коробка с отступом 10px для красной коробки. но все же синий прямоугольник равен 100px, потому что красный прямоугольник становится 120px. Также обратите внимание, что у синей рамки нет отступов, поэтому 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