css的表格自适应

CSS提供了强大的表格自适应方式，这使得我们能够在不同设备上呈现出一样的表格样式。下面我们来看看CSS如何实现表格自适应。

table {
  
  width: 100%;
  
  max-width: 100%;
  
  border-collapse: collapse;
}
td, th {
  
  border: 1px solid #ccc;
  
  padding: 8px;
  
  text-align: left;
}
 

使用以上CSS代码可以使表格自适应。其中，width: 100%表示表格占据整个父级元素的宽度，max-width: 100%表示表格宽度最大为父级元素的宽度。而border-collapse: collapse;则是为了防止表格内的边框重叠。

同样，表格内的单元格也需要进行自适应。通过td, th选择器设置内边距和文本对齐方式，使单元格内的内容不受影响。

如果想让表格在小屏幕设备上呈现更好的样式，可以使用CSS媒体查询来设置。下面是一段简单的媒体查询代码：

@media screen and (max-width: 480px) {
  
  td, th {
  
   
   display: block;
  
}
  
  td {
  
   
   border: none;
  
   
   position: relative;
  
   
   padding-left: 50%;
  
   
   margin-bottom: 12px;
  
}
  
  td:before {
  
   
   position: absolute;
  
   
   left: 6px;
  
   
   content: attr(data-label);
  
   
   text-transform: uppercase;
  
   
   font-weight: bold;
  
}
}
 

在上面的代码中，我们使用媒体查询来设置屏幕宽度小于480像素时的表格样式。通过将td, th的display属性设为block，我们使得单元格在小设备上呈现为独立的块元素。接下来，我们通过在单元格前添加伪元素:before来显示列的标题。这样，在小设备上表格会以块级元素形式呈现，并显示列的标题。

通过以上方式，我们可以让表格在不同设备上呈现出相似的样式。同时，也可以自定义表格在小设备上呈现的样式，让表格内容更加清晰易读。