我正在尝试使用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>
答案 0 :(得分:2)
您需要表格布局,然后使用表格而不是网格:
.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>
答案 1 :(得分:1)
您可以使用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));
您可能需要为某些单元格添加自己的换行规则。
答案 2 :(得分:1)
您正在混合使用网格和弹性框。尝试仅使用网格:
已更新以设置重复样式内联(因为列数可能会更改)
.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>
答案 3 :(得分:1)
仅添加断字: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>