css的表格怎么写

如今在网站设计中，CSS已经成为不可或缺的一部分。当我们需要创建表格时，CSS可以给我们提供许多有用的工具。下面是一些CSS的表格写法。

/*基础表格*/
  
  table {
  
   
   border-collapse: collapse;
 /*将表格边框合并*/
  
   
   width: 100%;
  
}
  
  
  table td, table th {
  
   
   border: 1px solid #ccc;
 /*设置每个单元格的边框*/
  
   
   padding: 8px;
 /*设置单元格内的间距*/
  
   
   text-align: left;
 /*设置文本对齐方式*/
  
}
  
  
  /*斑马线表格*/
  
  table.striped tr:nth-child(even) {
  
   
   background-color: #f2f2f2;
 /*设置偶数行的背景色*/
  
}
  
  
  /*响应式表格*/
  
  @media only screen and (max-width: 600px) {
  
   
 table.responsive {
  
   
   width: 100%;
  
   
}
  
   
  
   
 table.responsive tr,
  
   
 table.responsive td {
  
   
   display: block;
 /*将每个单元格变为块级元素*/
  
   
}
  
   
  
   
 table.responsive td {
  
   
   text-align: right;
 /*设置块级元素内的文本对齐方式*/
  
   
   padding: 5px;
 /*设置块级元素内的间距*/
  
   
}
  
}
 

以上代码可以帮助我们创建一个基础表格和一些进阶的CSS表格。而且，CSS还能用于表格排序、筛选等功能。它为我们提供了高度可定制的表格功能，使我们可以为每个页面或应用程序制作一个独特的表格。