html - CSS Grid - 当元素太大时使类似表格的网格溢出

我正在尝试使用 CSS 网格创建表格。到目前为止，我创建了一个简单的轮廓。

我必须在 row 级别创建网格(由于 IRL 表具有更多元素，我无法在 table 级别创建它们)。到目前为止，除非有一个很长的单词(或数字)，否则它是有效的，因为在这种情况下它会溢出包含单元格。

我的问题是:是否可以使表格溢出以使单元格至少与最大的单个单词或数字一样大？ (没有让他们崩溃——至少是数字)

提前致谢!

编辑:我需要用 CSS 网格创建一个表格，因为我需要为移动版本使用相同的布局

Edit2:我事先不知道行/列中会有多少元素，所以我需要利用 repeat

Edit3:我正在寻找纯 CSS 解决方案。

.table {
  margin: 48px 0;
  box-shadow: 0 5px 10px -2px #cfcfcf;
  font-family: Arial;
}

.row {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(72px, 1fr) );
  min-height: 48px;
  border-bottom: 1px solid #f1f1f1;
}

.column {
  display: flex;
  width: 100%;
  height: 100%;
  border: 1px solid #f1f1f1;
  align-items: center;
  
}

.row:first-child {
  font-weight: bold;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="table">
      <div class="row">
        <div class="column">Name</div>
        <div class="column">Age</div>
        <div class="column">Favourite Book</div>
        <div class="column">Favourite Color</div>
        <div class="column">Favourite Meal</div>
      </div>
      <div class="row">
        <div class="column">Jimmy</div>
        <div class="column">23</div>
        <div class="column">None</div>
        <div class="column">White</div>
        <div class="column">Paella de Chorizo</div>
      </div>
      <div class="row">
        <div class="column">Johny</div>
        <div class="column">56</div>
        <div class="column">Finnegans Wake</div>
        <div class="column">Purple, Magenta and Violet</div>
        <div class="column">None</div>
      </div>
      <div class="row">
        <div class="column">Robert The Snake Robertson</div>
        <div class="column">1.234.567.890.000.000</div>
        <div class="column">The Count of Monte Cristo</div>
        <div class="column">Orange</div>
        <div class="column">Apples</div>
      </div>
    </div>
        
    
  </body>

</html>

最佳答案

你想要一个表格布局，然后使用表格而不是网格:

.table {
  margin: 48px 0;
  box-shadow: 0 5px 10px -2px #cfcfcf;
  font-family: Arial;
  display:table;
  width:100%;
}

.row {
  display: table-row;
  min-height: 48px;
  border-bottom: 1px solid #f1f1f1;
}

.column {
  display: table-cell;
  border: 1px solid #f1f1f1;
  vertical-align: middle;
  padding:10px 0;
}


.row:first-child {
  font-weight: bold;
}

<div class="table">
      <div class="row">
        <div class="column">Name</div>
        <div class="column">Age</div>
        <div class="column">Favourite Book</div>
        <div class="column">Favourite Color</div>
        <div class="column">Favourite Meal</div>
      </div>
      <div class="row">
        <div class="column">Jimmy</div>
        <div class="column">23</div>
        <div class="column">None</div>
        <div class="column">White</div>
        <div class="column">Paella de Chorizo</div>
      </div>
      <div class="row">
        <div class="column">Johny</div>
        <div class="column">56</div>
        <div class="column">Finnegans Wake</div>
        <div class="column">Purple, Magenta and Violet</div>
        <div class="column">None</div>
      </div>
      <div class="row">
        <div class="column">Robert The Snake Robertson</div>
        <div class="column">1.234.567.890.000.000</div>
        <div class="column">The Count of Monte Cristo</div>
        <div class="column">Orange</div>
        <div class="column">Apples</div>
      </div>
    </div>

关于html - CSS Grid - 当元素太大时使类似表格的网格溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58083712/

html - CSS Grid - 当元素太大时使类似表格的网格溢出

上一篇：jquery - 如何使用 jquery 添加和删除输入值？

下一篇：javascript - 根据元素在层次结构中的存在将类添加到祖先元素