Question

我正在使用var logger = LogProvider.For<SomeType>(); using (LogProvider.OpenMappedContext("Foo", "12")) using (LogProvider.OpenMappedContext("Bar", "34")) using (LogProvider.OpenMappedContext("Last", "56")) { logger.InfoFormat("testing {somePlaceholder}", 78); }广泛使用table来显示报告，但我的colspan宽度有点问题。

这是Fiddle

HTML

td

CSS

<table cellspacing='0'>
  <thead>
    <tr><th colspan='27'>&nbsp;</th></tr>
  </thead>
  <tfoot>
    <tr><td colspan='27'>&nbsp;</td></tr>
  </tfoot>
  <tbody>
    <tr class='odd label-first'>
      <td colspan='7'>Colony</td>
      <td colspan='20'>Test Colony</td>
    </tr>
    <tr class='even label-first'>
      <td colspan='7'>Full Nomenclature</td>
      <td colspan='20'>Hkfay38hfo9t<sup>hlFH</sup> 9t3P</td>
    </tr>
    <tr class='odd label-first'>
      <td colspan='7'>Investigator</td>
      <td colspan='20'>John Smith</td>
    </tr>
    <tr class="tr-th">
      <td colspan='7'>&nbsp;</td>
      <td colspan='10'>Breeding</td>
      <td colspan='10'>Non-breeding</td>
    </tr>
    <tr class="odd label-first">
      <td colspan='7'>Cages</td>
      <td colspan='10' class='c-align'>10</td>
      <td colspan='10' class='c-align'>2</td>
    </tr>
    <!-- <tr class="even label-first">
      <td colspan='7'>Estimated Housing Cost Per Month</td>
      <td colspan='2'>$105.00</td>
      <td colspan='4'>
        <span class='td-label'>Breeding Rate</span>0.16
      </td>
      <td colspan='4'>
        <span class='td-label'>Non-breeding Rate</span>0.95
      </td>
      <td colspan='10'>
        <span class='td-label'>Housing Cost Calculation</span>[ (10 * 0.16) * 30 days ] + [ (2 * 0.95) * 30 days ]
      </td>
    </tr> -->
    <tr class="tr-th">
      <td colspan='3' class="equal">Width</td>
      <td colspan='3' class="equal">Width</td>
      <td colspan='3' class="equal">Width</td>
      <td colspan='3' class="equal">Width</td>
      <td colspan='3' class="equal">Width</td>
      <td colspan='3' class="equal">Width</td>
      <td colspan='3' class="equal">Width</td>
      <td colspan='3' class="equal">Width</td>
      <td colspan='3' class="equal">Width</td>
    </tr>
    <tr class="odd">
      <td colspan='3' class="c-align equal">0</td>
      <td colspan='3' class="c-align equal">0</td>
      <td colspan='3' class="c-align equal">0</td>
      <td colspan='3' class="c-align equal">0</td>
      <td colspan='3' class="c-align equal">0</td>
      <td colspan='3' class="c-align equal">0</td>
      <td colspan='3' class="c-align equal">0</td>
      <td colspan='3' class="c-align equal">0</td>
      <td colspan='3' class="c-align equal">0</td>
    </tr>
  </tbody>
</table>

Jquery的

table {
  border-collapse: collapse;
}

th, td {
  padding: 7px;
  border: 1px solid #dddddd;
}

thead, .tr-th, tfoot {
  background-color: #003366;
  color: #ffffff;
  font-weight: bold;
}

tfoot td {
  padding: 0;
  font-size: 2px;
}

thead th, .tr-th td, tfoot td {
  border: 1px solid #003366;
  text-align: center;
}

.odd {
  background-color: #f9f9f9;
}

.even {
  background-color: #f2f2f2;
}

.label-first td:first-child {
  background-color: #eeeeee;
}

.c-align {
  text-align: center;
}

.td-label {
  display: block;
  font-size: 10px;
  font-weight: bold;
  font-style: italic;
}

.equal {
  min-width: 90px;
  width: 90px;
  max-width: 90px;
}

我注释掉了我认为导致宽度问题的HTML。如果您查看Fiddle，您会看到表格底部的所有$(document).ready(function() { $.each($("tr").not(".tr-th").find(".equal"), function(index, element) { $(this).html($(this).css("width")); }); });的宽度都相等但是如果添加已注释掉的td突然tr的宽度不会相等。我不知道发生了什么，但有人可以帮助我吗？

我知道我可以避免使用td并在需要时使用它，但现在让我们坚持下去。

Answer 1

更新

我知道这是一个完全古老的Q＆amp; A，但我碰巧检查了它并发现它想要。

添加了表格
更改了表的布局，以便每个colspan共享一个分母27
添加了<input>和<output>来计算 cages的数量？
使用<tbody> s对表格进行划分，以便定义，隔离和轻松选择每个数据和函数的显示（由于每行具有不同数量的colspans，因此很好地指向一个点。）

我之前写过的内容仍然有效，除了我对table-layout:fixed所说的内容。我说它尊重<td>的宽度设置，直到表格的宽度超过所有列宽的总和。幸好它仍然像一张桌子。固定表不做的事情是符合它的内容并且分布宽度不均匀。在演示中注意宽度为50px的9 <td>的底行（给出或取一个像素，我不知道为什么）。

每个<td>为width:30px [＆lt; - + 30-＆gt;] = 30px
每个<td>为padding:5px [＆lt; - + 5＆lt; - + 30-＆gt; + 5-＆gt;] = 40px
[{＆lt; - + 5＆lt; - + 30 + 10-＆gt; + 5＆gt;] 50px

<td>

10px是因为每个预期的40px宽度与450px处的表格宽度不相加。因此它可以均匀地分配额外的90px。如果桌子没有固定，宽度分布会不均匀。要看到这个实时比较演示1和演示2。

<小时/>

旧

Firefox的默认box-sizing值为content-box，这意味着当您预期宽度为90px <td>时，您实际上会看到117px宽<td>，因为{{1}仅测量元素的宽度和高度属性仅包含内容。边界，填充和边距不包括在测量中。

我们作为人类感觉更舒服地测量我们认为包括边界和填充的东西（不是真正的边缘，因为它被表示为元素之间的空白空间。content-box模型是我们自然假设的已实现。border-box包含元素的内容，边框和填充。它唯一不包括的是边距（我们通常不会在测量中计算。）< / p>

您需要做的是在开始一个项目之前设置默认值，该项目涉及的维度在如此严格的测量中都相互交叉。 27列意味着边框可以在水平和垂直方向上相加至少额外54px。

以下是我开始的样式默认值，重要属性标有星号和匕首：

详情在演示中进行了评论

演示1

＆＃13;

border-box

＆＃13;

$(document).ready(function() {

  /* First function is a modified version of
  || The original one. Each <td> targeted will
  || display it's width
  */
  $('#measure tr:last-of-type td').each(function(idx, ele) {
    $(this).html($(this).css("width"));
  });
  /* This function delegates the input event
  || on all <input>s
  */
  $('input').on('input', function(e) {
    /* Get this (i.e. <input> triggered) node's
    || parent <td>, then...
    || ...get all of that <td>'s sibling <td>
    || that follow it, then...
    || ...get the <output> in each of those <td>
    */
    var outs = $(this).parent('td').nextAll('td').find('output');
    // Store the value of the first <output>
    var rate = outs[0].value;
    // Get the value of this and multiply it with rate
    var cost = this.value * rate;
    /* The value of the second <output> is
    || the product of this value, rate and 30
    || formated to the hundredths (currency)
    */
    outs[1].value = (cost * 30).toFixed(2);
    // Calculate each subtotal to display it
    var bnTotal = Number($('#bTotal').val()) + Number($('#nTotal').val());
    // Then do so for the total as well
    $('#bnTotal').val(bnTotal.toFixed(2));
  });
});

＆＃13;

html {
  /* border-box is the best box modal to use */
  box-sizing: border-box;
  /* font-size set at root can be easily 
  || referenced by any other font-size on the page
  */
  font: 400 62.5%/1.428 Tahoma;
  /* Both dimensions set at 100% x 100% allows
  || the children elements a solid reference 
  || when relative measurement is used.
  */
  height: 100%;
  width: 100%;
}


/* Pseudo-elements must be explicitly set in
|| cases were the universal selector is used *
|| I think it's because they are not part of the DOM
*/

*,
*:before,
*:after {
  box-sizing: inherit;
  /* Hard reset on:
  || - margin so positioning isn't hindered. 
  || - padding element size is can be easily discerned
  || - border same reason as padding
  || - outline it doesn't affect dimensions like
  ||   border but can be easily confused with border.
  ||   Add outlines back afterwards
  */
  margin: 0px;
  padding: 0px;
  border: 0px none transparent;
  outline: 0px none transparent;
}

body {
  position: relative;
  font-size: 1rem;
  height: 100%;
  width: 100%;
  overflow: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

table {
  /* Ensures there's no space between <td> */
  border-collapse: collapse;
  /* As above */
  border-spacing: 0;
  /* Disable table feature responsible for evenly
  || distributing <td> width and compliance to
  || content. If a length is given on <td>, <th>,
  || or <table>, it will adhere to it.
  */
  table-layout: fixed;
  /* Set the width of table that share a common
  || denominator with the width of a <td>
  */
  width: 450px;
  margin: 20px auto;
}

th,
td {
  padding: 5px;
  outline: 1px solid #dddddd;
  width: 30px;
}

tbody tr td:first-of-type {
  background-color: #556;
  color: #eee;
}

tr:nth-of-type(2n+1) td {
  background-color: #f9f9f9;
}

tr:nth-of-type(2n+2) td {
  background-color: #f2f2f2;
}

code {
  display: block;
  margin: -15px 0;
  padding: 0;
}

pre {
  font: 100 .5rem/1.2 Consolas;
}

input,
output {
  font: inherit;
  display: block;
  width: 100%;
  height: 100%;
  text-align: right;
}

input:hover {
  outline: 1px solid #0e0;
  color: #0e0;
  background: #111;
  cursor: pointer;
}

output::before {
  content: ' $'
}

thead th,
tfoot td {
  background-color: #003366;
  color: #ffffff;
  font-weight: bold;
  outline: 1px solid #003366;
}

#measure td {
  text-align: center
}

#cost tr:first-child td {
  background: rgba(51, 51, 51, .2);
}

＆＃13;

这些属性在所有内容都重置为0，因此 caveat emptor

*根（<!doctype html> <html> <head> <meta charset='utf-8'> <style> </style> </head> <body> <table> <thead> <tr> <th colspan='27'> </th> </tr> </thead> <tbody id='profile'> <tr> <td colspan='6'>Colony</td> <td colspan='21'>Test Colony</td> </tr> <tr> <td colspan='6'>Nomenclature</td> <td colspan='21'>Hkfay38hfo9t<sup>hlFH</sup> 9t3P</td> </tr> <tr> <td colspan='6'>Investigator</td> <td colspan='21'>John Smith</td> </tr> </tbody> <tbody id='info'> <tr> <td colspan='6'>Estimated Housing Cost Per Month</td> <td colspan='3'>$105</td> <td colspan='18'> <code><pre> Housing Cost Calculation [(bN * bCage)*(bRate * 30 DAYS)] + [(nN * nCage)*(nRate * 30 DAYS)] </pre></code> </td> </tr> </tbody> <tbody id='cost'> <tr> <td colspan='6'> </td> <td colspan='9'>Type</td> <td colspan='3' style='text-align:center;'>Qty</td> <td colspan='3' style='text-align:center;'>Rate </td> <td colspan='6' style='text-align:center;'>Monthly Cost</td> </tr> <tr> <td colspan='6' rowspan='3'>Cages</td> <td colspan='9' style='background:#556;color:#eee'>Breeding</td> <td colspan='3'> <input id='bN' type='number' min='0'> </td> <td colspan='3'> <output id='bRate'>.16</output> </td> <td colspan='6'> <output id='bTotal' for='bN'></output> </td> </tr> <tr> <td colspan='9'>Non-breeding</td> <td colspan='3'> <input id='nN' type='number' min='0'> </td> <td colspan='3'> <output id='nRate'>.95</output></td> <td colspan='6'> <output id='nTotal' for='nN'></output> </td> </tr> <tr> <td colspan='15'>Total Housing Cost Per Month</td> <td colspan='6'> <output id='bnTotal' for='bTotal nTotal'></output> </td> </tr> </tbody> <tbody id='measure'> <tr> <td colspan='3' style='background:#f9f9f9;color:#000'>Width</td> <td colspan='3'>Width</td> <td colspan='3'>Width</td> <td colspan='3'>Width</td> <td colspan='3'>Width</td> <td colspan='3'>Width</td> <td colspan='3'>Width</td> <td colspan='3'>Width</td> <td colspan='3'>Width</td> </tr> <tr> <td colspan='3' style='background:#f9f9f9;color:#000'>0</td> <td colspan='3'>0</td> <td colspan='3'>0</td> <td colspan='3'>0</td> <td colspan='3'>0</td> <td colspan='3'>0</td> <td colspan='3'>0</td> <td colspan='3'>0</td> <td colspan='3'>0</td> </tr> </tbody> <tfoot> <tr> <td colspan='27' style='background:#036;'>   </td> </tr> </tfoot> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>）设置为<html>，然后其他所有内容都设置为来自根box-sizing:border-box inherit，但您将拥有将任何内容更改为border-box的选项，它的孩子也会自然继承content-box。不过，你非常怀疑。

在您的具体情况下，您希望每个content-box不再是90px宽，不会少（但这不是您从默认.equal获得的行为，我们和＃39;之后将解决该问题）。如果你看看devtools中的<td> ......那么@ 117px宽。我尝试计算27px的差异，但我只能解释16px，我将解释为什么很快会有额外的11px无法解释。这是您表格中的典型td.equal：

<td>

所以到目前为止，width: 90px; padding: 7px x 2 (padding-right/padding-left) border: 1px x 2 (border-right/border-left)的最小值为16px，看起来Firefox处理得太多，并且不能很好地分配额外的宽度，但另一方面Chrome似乎做一个默认表的预期，即尽可能均匀地自动分配宽度。这就是90px宽度不被尊重的原因。因此，如果您使用td.equal（您应该使用），您仍然会box-sizing:border-box拥有自己的想法。

<td>是一个属性，用于指示表格应如何处理它的内容。您可以使用以下两个值：

table-layout：这是表的默认行为，它会扩展到内容并在auto之间分配宽度，因为它看起来合适。它会忽略像90px这样的固定测量。这可能解释了额外的11px。
<td>：此行为更易于管理。如果将列设置为90px宽，则该表将遵循该90px。

所以回顾一下：

将{{1>}用于所有内容

fixed

使用border-box

参考

MDN-box-sizing

CSS-Tricks-box-sizing

MDN-table-layout

演示2

[注意9个单元格的底行，你会看到第3个单元格贪吃任何额外的宽度]

＆＃13;

html {
  box-sizing: border-box;＊
  ....
}

*,
*:before,
*:after {
  box-sizing: inherit;
 ...
}

＆＃13;

table-layout:fixed

＆＃13;

$(document).ready(function() {

  /* First function is a modified version of
  || The original one. Each <td> targeted will
  || display it's width
  */
  $('#measure tr:last-of-type td').each(function(idx, ele) {
    $(this).html($(this).css("width"));
  });
  /* This function delegates the input event
  || on all <input>s
  */
  $('input').on('input', function(e) {
    /* Get this (i.e. <input> triggered) node's
    || parent <td>, then...
    || ...get all of that <td>'s sibling <td>
    || that follow it, then...
    || ...get the <output> in each of those <td>
    */
    var outs = $(this).parent('td').nextAll('td').find('output');
    // Store the value of the first <output>
    var rate = outs[0].value;
    // Get the value of this and multiply it with rate
    var cost = this.value * rate;
    /* The value of the second <output> is
    || the product of this value, rate and 30
    || formated to the hundredths (currency)
    */
    outs[1].value = (cost * 30).toFixed(2);
    // Calculate each subtotal to display it
    var bnTotal = Number($('#bTotal').val()) + Number($('#nTotal').val());
    // Then do so for the total as well
    $('#bnTotal').val(bnTotal.toFixed(2));
  });
});

＆＃13;

带有colspan宽度的HTML表

HTML

CSS

Jquery的

1 个答案:

更新

旧

演示1

参考

演示2