CODEWITHSUNDEEP
csshtml
zmbq
zmbq

Reputation: 39023

Adding a table row that does not change any column width

I have a table that is rendered quite well (using Bootstrap 4) without specifying column widths.

I want to add a footer that contains an input field for each column. Adding the footer changes the width of the columns, and really makes the table too wide. How can I add a table cell and instruct the browser not to use it when calculating the column width?

You can see an example here. Simply comment out the <tfoot> and see how the table is rendered without the inputs. I want to add the inputs without changing the column size.

Upvotes: 3

Views: 1587

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106008

bootsrap 4 uses table-sm instead table-condensed. That might not be enough, you can declare the table-layout in the CSS and add a max-width to inputs:

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

https://jsfiddle.net/c06tomp9/

You may also take the input of the flow so they do not come into size calculation bothering column's width.

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/

Upvotes: 3

Mr Lister
Mr Lister

Reputation: 46589

As far as I'm aware, there is no CSS-only way to do this.

Javascript can do it, of course, so on the off chance that you won't consider that cheating, here is the solution.

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>

Note that the inputs in col 2 and col 3 are too wide for the columns, so they overflow out of their cells (out of the table even), but the solution to that I'll leave as an exercise for the reader.

Upvotes: 1

Programmer
Programmer

Reputation: 2123

You can use table-layout: fixed; on the table so the width of the columns won't change when adding rows, but then all columns have the same width by default, and if you to change it you need to set the width explicitly.

Upvotes: 1

Related Questions