使用CSS网格重新创建html表格类型单元格和列宽布局

Question

我想在表格中显示数据，但标签不允许我做我想做的事情。下一个最好的事情是使用网格，但是我无法以适合我的方式设置列的样式。 我的目标是使列宽与该列最宽单元格的宽度相同。所有列都将是动态宽度。

目前我的CSS看起来像这样：

display: grid;
grid-template-columns: repeat(13, 1fr);
width: 100%;
border: 1px solid black;    

所有列的宽度相同，并且完全不是动态的。如果我更改 1fr > auto;那么每行单元格都有不同的宽度。 简而言之，我希望每行列的宽度与所有行中该列最宽的单元格的宽度相同。 我可以只用 html 和 css 来实现这一点还是需要使用 js ？我应该尝试用 flexbox 来做这个吗？这是不可能的，因为它不符合应用程序的需求。

Answer 1

我不太确定我明白你的意思，但如果你打算有一个类似网格布局表的表格，其中每个单元格将其宽度扩展为同一列上最宽的单元格的最大宽度，但又不更宽，那么解决方案可能是将容器的宽度设置为

width: fit-content;

，将网格布局设置为

grid-template-columns: repeat(13, 1fr);

table td{
  border: solid 1px;
}

.grid{
  display: grid;
  grid-template-columns: repeat(13, auto);
  border: 1px solid black;
  width: fit-content;
  gap: 1px;
}

.grid .cell{
  border: solid 1px;
}

<h1>TABLE layout</h1>

<table>
  <tr>
    <td>1</td>
    <td>very large content</td>
    <td>3</td>    
    <td>4</td>
    <td>5</td>
    <td>6</td>    
    <td>7</td>
    <td>8</td>
    <td>9</td>    
    <td>10</td>
    <td>11</td>
    <td>12</td>    
    <td>13</td>    
  <tr> 
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>    
    <td>4</td>
    <td>5</td>
    <td>6</td>    
    <td>very large content</td>
    <td>8</td>
    <td>9</td>    
    <td>10</td>
    <td>11</td>
    <td>12</td>    
    <td>13</td>    
  <tr> 
</table>

<h1>GRID layout</h1>

<div class="grid">    
  <!-- row[1] -->
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <!-- row[2] -->
  <div class="cell">1</div>
  <div class="cell">very large content</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <!-- row[2] -->
  <div class="cell">1</div>
  <div class="cell">d</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">very large content</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
   <!-- row[2] -->
  <div class="cell">1</div>
  <div class="cell">d</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">13</div>    
  
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>    
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>    
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>    
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>    
  <div class="cell">very large content</div>    
</div>