Question 274698 in Html Question posted in
Some basic documentation can be found here.

Html – Table behavior without using table

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>
Tags:

2

Answers


  1. 0 
    .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px; 
    border: 1px solid;
  }

  .cell {
   
    padding: 0.25em;
    border: 1px solid;
  }
    <div class="container">
  <div class="cell">y</div>
  <div class="cell">sin(x)*cos(x)</div>
  <div class="cell">f(x)</div>
  <div class="cell">tan(x)</div>
</div>
    Login or Signup to reply.
  2. 0 
    .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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search