css实现带网格表格代码

代码语言:html

所属分类:表格

代码描述:css实现带网格表格代码

代码标签: css 网格 表格 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">
 

 
 
<style>
@layer base, content;
@layer content {
 
.comp-grid {
   
display: grid;
   
grid-template-columns: 1fr;
   
grid-template-rows: calc(1.3 * 1em) calc(3 * 1.3 * 1em);
   
gap: 0.5em;
   
line-height: 1.3;
 
}
 
.comp-grid .detail {
   
--color: var(--color-text--light, rgb(0 0 0 / 0.7));
   
color: var(--color);
   
font-size: 0.9em;
 
}
 
.comp-grid .detail > div {
   
display: flex;
   
justify-content: flex-end;
   
align-items: center;
   
gap: 0.5ch;
 
}
 
.comp-grid .detail > div span:last-child {
   
min-width: 5ch;
 
}

 
.tar {
   
text-align: right;
 
}
}
@layer base {
  html
{
   
height: 100%;
 
}

  body
{
   
height: 100%;
   
display: grid;
   
place-items: center;
   
font-family: system-ui;
 
}

 
.card {
   
border: 2px solid rgba(0, 0, 0, 0.1);
   
padding: 2rem;
   
margin: 1rem;
   
box-shadow: 0.5rem 0.5rem 20rem rgba(0, 0, 0, 0.2);
   
background-color: #fff;
 
}

  table
{
   
border-collapse: collapse;
 
}

 
tr:nth-child(odd) {
   
background-color: rgba(0, 0, 0, 0.1);
 
}

  td
{
   
border: 1px solid #333333;
   
padding: 0.5rem 2ch;
   
vertical-align: top;
   
min-width: 120px;
 
}
}
</style>

 
</head>

<body>
 
<div class="card">
 
<table>
   
<tbody>
     
<tr>
       
<td>
          Absicherung A
       
</td>
       
<td class="tar">
          30,00 €
       
</td>
       
<td class="tar">
          30,00 €
       
</td>
       
<td class="tar">
          30,00 €
       
</td>
     
</tr>
      <.........完整代码请登录后点击上方下载按钮下载查看

网友评论0