Question

我有一个渲染得很好的表（使用Bootstrap 4），而没有指定列宽。

我想添加一个页脚，其中包含每列的输入字段。添加页脚会更改列的宽度，并确实使表格过宽。如何在计算列宽时添加表格单元格并指示浏览器不要使用它？

您可以看到示例here。只需注释掉<tfoot>并查看如何在没有输入的情况下呈现表格。我想添加输入而不更改列大小。

Answer 1

bootsrap 4使用table-sm代替table-condensed。那可能还不够，您可以在CSS中声明表格布局，并为输入添加最大宽度：

table {table-layout:fixed;}
input {max-width:90%;}

https://jsfiddle.net/c06tomp9/

您还可以输入流的输入，以免它们进入大小计算而不会影响列的宽度。

table {border:solid;}
tfoot tr th {position:relative;height:3.4em;/* an height needs to be set to hold the inputs unseen */}
input {position:absolute;max-width:90%;}

https://jsfiddle.net/c06tomp9/1/

Answer 2

您可以在表格上使用table-layout: fixed;，以便在添加行时列的宽度不会改变，但是默认情况下，所有列的宽度都相同，如果要更改它，则需要设置宽度。

Answer 3

据我所知，没有唯一的CSS方式可以做到这一点。

Javascript可以做到，所以，如果您不打算作弊，这就是解决方法。

window.onload = function() {

  var theTable = document.querySelector('.container .col-12 .table-condensed');
  var firstRow = theTable.querySelector('thead tr').cells;
  var footElements = theTable.querySelectorAll('tfoot th *');

  // First, we set the widths of all the contents of the tfoot to 0 so it won't take up space
  for (var i = 0; i < footElements.length; ++i)
    footElements[i].style.width = '0';

  // Then we fix the widths of the columns to the widths they have now
  for (var i = 0; i < firstRow.length; ++i)
    firstRow[i].style.width = '' + firstRow[i].offsetWidth + 'px';
  theTable.style.tableLayout = 'fixed';

  // And finally we change the widths of the tfoot contents back to what they were
  for (var i = 0; i < footElements.length; ++i)
    footElements[i].style.width = '';
};

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-12">
      <table class="table table-condensed">
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Lengthy cell with lots of text</td>
            <td>2</td>
            <td>3</td>
          </tr>
        </tbody>

        <tfoot>
          <tr>
            <th><input type="text"></th>
            <th><input type="text"></th>
            <th><input type="text"></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

请注意，第2列和第3列中的输入对于列而言太宽，因此它们溢出其单元格（甚至超出了表格），但是我将作为练习供读者阅读

添加不更改任何列宽的表行

3 个答案: