Table behavior without using table

October 29, 2023

I don’t know what to call it when the columns’ width of a table are equal to the largest cell’s width in that column, but I want to know if it is possible to achieve it using anything like flex or grid?

table,
td {
  border-collapse: collapse;
  border: 1px solid;
}

td {
  font-family: "Courier New", monospace;
  padding: 0.25em;
}

<table>
  <tr>
    <td>y</td>
    <td>sin(x)*cos(x)</td>
  </tr>
  <tr>
    <td>f(x)</td>
    <td>tan(x)</td>
  </tr>
</table>

>Solution :

.table {
  display: block;  /* block element */
}
.table-inner {
  display: inline-grid; /* inline element */
  grid-template-columns: auto auto; /* 2 columns */
  border-style: solid;
  border-width: 0 0 1px 1px;
}
.table-inner > div {
  padding: 0.25em; /* default cell padding */
  border-style: solid;
  border-width: 1px 1px 0 0;
}

<div class="table">
<div class="table-inner">
  <!-- row 1 -->
    <div>y</div>
    <div>sin(x)*cos(x)</div>
  <!-- row 2 -->
    <div>f(x)</div>
    <div>tan(x)</div>
</div>
</div>