How do I make a table element to horizontally overflow it's parent container?

user_475727 0
Viewed 66

How do I make a table element to horizontally overflow it's parent container? I would like to avoid setting table width, since it should be sum of the columns.

I'm trying to set columns widths, but as soon as they reach parents width, they does not grow anymore.

Following snippet demonstrates two tables with different column widths, but they are both rendered equally. The second table should actually overflow the parent.

.container {
  width: 300px;
  background: #ccc;
  overflow: auto;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 10px
}

td,
th {
  border: solid 1px red;
  text-align: center
}

#table1 col {
  width: 100px
}

#table2 col {
  width: 200px
}
<div class="container">
  <table id="table1">
    <colgroup>
      <col /><col /><col />
    </colgroup>
    <thead>
      <tr>
        <th>A</th><th>B</th><th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3</td>
      </tr>
    </tbody>
  </table>

  <table id="table2">
    <colgroup>
      <col /><col /><col />
    </colgroup>
    <thead>
      <tr>
        <th>A</th><th>B</th><th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td><td>2</td><td>3</td>
      </tr>
    </tbody>
  </table>
</div>

css html
3 Answers

just set an overflow to overflow-x property which will allow table to overflow in width and thereafter set the widthof table

.container {
  width: 350px;
  background: #ccc;
  overflow-x: auto;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 10px;
  width: 100%;
}

td,
th {
  border: solid 1px red;
  text-align: center;
}

#table1 col {
  width: 100px;
}

#table2 col {
  width: 200px;
}
<div class="container">
  <table id="table1">
    <colgroup>
      <col />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

  <table id="table2">
    <colgroup>
      <col />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

user_135368930

You should add width to table , try to add

width: max-content;

to table

table {
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 10px;
  width: max-content;
}
user_59026910

The CSS property table-layout: fixed will only really apply if you set a width to your table. This can also be width: 100%. Also, remove overflow: auto from your parent element's class, unless you want horizontal scrollbars.

.container {
  width: 300px;
  background: #ccc;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: 10px;
  width: 100%;
}
user_74947180
Related