HTML Table with no fixed width and all columns the width of largest column (without JS)-CodePudding

Is it possible to have a table where the following are all true:

Column widths are always equal
Column widths are as wide as the space the widest column needs without its cell content breaking out of the column (e.g. contains a button with a long label and white-space: nowrap).
Table can be as wide as it needs (so has no fixed width, percentage or absolute value).

It seems that table-layout: fixed takes care of the equal columns, but requires a width on the table, and only takes into account the widths of the first row of cells. Switching to `table-layout: auto results in uneven column widths (And setting percentage widths for the columns doesn't have any effect).

table {
  border-collapse: collapse ;
}

th, td {
  outline: 1px solid black;
  padding: 5px;
}

.tableWrapper {
  max-width: 600px;
}

.tableFixed {
  table-layout: fixed;
  width: 100%;
}

.tableFixedWithPercentageWidths {
  th, td {
    min-width: 33.33%;
  }
}

button {
  white-space: nowrap;
}

<div >
  <h4>Auto</h4>
  <table>
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
      <th>Charlie</th>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td><button>This is a really long button label</button></td>
    </tr>
  </table>
  <h4>Fixed</h4>
  <table >
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
      <th>Charlie</th>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td><button>This is a really long button label</button></td>
    </tr>
  </table>
  <h4>Auto with percentage cell widths</h4>
  <table >
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
      <th>Charlie</th>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td><button>This is a really long button label</button></td>
    </tr>
  </table>
  <h4>Fixed with percentage cell widths</h4>
  <table >
    <tr>
      <th>Alpha</th>
      <th>Bravo</th>
      <th>Charlie</th>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td>Charlie</td>
    </tr>
    <tr>
      <td>Alpha</td>
      <td>Bravo</td>
      <td><button>This is a really long button label</button></td>
    </tr>
  </table>
</div>

Is it possible to achieve this using CSS alone?

CodePudding user response：

You can use css grid, if you don't want to use any exclusive <table> features. (i.e, if you are only concerned with the appearance).

CodePudding user response：

Is this what you want?

HTML:

<html>
<body>
    <div >
        <h4>Mine</h4>
        <table>
          <tr>
            <th>Alpha</th>
            <th>Bravo</th>
            <th>Charlie</th>
          </tr>
          <tr>
            <td>Alpha</td>
            <td>Bravo</td>
            <td>Charlie</td>
          </tr>
          <tr>
            <td>Alpha</td>
            <td>Bravo</td>
            <td>Charlie</td>
          </tr>
          <tr>
            <td>Alpha</td>
            <td>Bravo</td>
            <td><button>This is a really long button label yessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</button></td>
          </tr>
        </table>
        
        </table>
      </div>
</body>
</html>

CSS:

table {
    /* border-collapse: collapse ; */
    overflow-x: scroll;
    min-width:max-content;
  }
  
  th, td {
    outline: 1px solid black;
    padding: 5px;
    width: 33%;
  }
  
  button {
    white-space: nowrap;
  }