Question

我正在尝试使用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>

Answer 1

您需要表格布局，然后使用表格而不是网格：

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

Answer 2

您可以使用CSS fit-content(max-width)（docs），但我不知道它是否可以与grid repeat()结合使用。

.row {
  display: grid;
  grid-template-columns: auto, fit-content(300px), fit-content(100px), auto, auto;
  min-height: 48px;
  border-bottom: 1px solid #f1f1f1;
}

编辑：在repeat（）中，您可以使用max-content keyword。

grid-template-columns: repeat(auto-fit, minmax(auto, max-content));

您可能需要为某些单元格添加自己的换行规则。

Answer 3

您正在混合使用网格和弹性框。尝试仅使用网格：

已更新以设置重复样式内联（因为列数可能会更改）

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);/* overridden inline */
  border-top: 1px solid black;
  border-right: 1px solid black;
}

.grid>div {
  padding: 8px 4px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.grid>div.th {
  font-weight: bold;
}

<div class="grid" style="grid-template-columns: repeat(5,1fr);">
  <div class="th">Name</div>
  <div class="th">Age</div>
  <div class="th">Favourite Book</div>
  <div class="th">Favourite Color</div>
  <div class="th">Favourite Meal</div>

  <div>Jimmy</div>
  <div>23</div>
  <div>None</div>
  <div>White</div>
  <div>Paella de Chorizo</div>

  <div>Johny</div>
  <div>56</div>
  <div>Finnegans Wake</div>
  <div>Purple, Magenta and Violet</div>
  <div>None</div>

  <div>Robert The Snake Robertson</div>
  <div>1.234.567.890.000.000</div>
  <div>The Count of Monte Cristo</div>
  <div>Orange</div>
  <div>Apples</div>

</div>

Answer 4

仅添加断字：break-word;列类中的属性

    .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;
    word-break: break-word;
    }
    .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>

CSS网格-当项目太大时，使表格状网格溢出

4 个答案: