Chris
Chris

Reputation: 28064

How can I prevent a nested table from enlarging the parent table?

Demo of my problem here: https://jsfiddle.net/ahnfcwdo/1/

I have a table like this:

table { 
    max-width:100%;
    overflow: auto;
}

.table1 {
    border: 1px solid red;
}

.table2 {
    border: 1px solid blue;
    overflow-x:scroll;
    display:block;
}
<table class="table1">
  <tr>
    <td>column a</td>
    <td>column b</td>
    <td>column c</td>

  </tr>
  <tr>
    <td colspan="3">
      <table class="table2">
        <tr>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>

      </table>
    </td>
    </tr>
</table>

The parent table will contain a nested table for each detail row. That nested table will have a variable number of columns, some of which do not fit on screen. I'd rather the nested table take on a horizontal scroll bar than cause the parent table to expand horizontally to accommodate the overflow.

In other words, in the demo, I do not want the blue border nested table to push the right side of the red border off screen. I'd rather the scrollbar appear for the blue bordered table within the normal bounds of the red border table.

Upvotes: 4

Views: 748

Answers (1)

j08691
j08691

Reputation: 207901

To the parent table add table-layout:fixed; width:100%;

table {
  max-width: 100%;
  overflow: auto;
}
.table1 {
  border: 1px solid red;
  table-layout: fixed;
  width: 100%;
}
.table2 {
  border: 1px solid blue;
  overflow-x: scroll;
  display: block;
}
<table class="table1">
  <tr>
    <td>column a</td>
    <td>column b</td>
    <td>column c</td>

  </tr>
  <tr>
    <td colspan="3">
      <table class="table2">
        <tr>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>
          <td>column</td>

      </table>
    </td>
    </tr>
</table>

Upvotes: 3

Related Questions