Advertisements
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>