mobi.css 表格 ,css样式表模板

MOBI.css 表格 CSS 样式表模板

MOBI.css 是一个专门为移动设备设计的轻量级 、响应式 CSS 框架 ，它能够帮助开发者快速构建出适合在手机 、平板等设备上展示的网页 。以下是一个针对 MOBI.css 的表格 CSS 样式表模板 ，该模板旨在提供一套简洁 、易用且响应式的表格样式 ，以适应不同屏幕尺寸和设备类型 。

一 、基础表格样式

```css

/* 基础表格样式 */

table {

width: 100%;

border-collapse: collapse;

margin-bottom: 1rem;

th , td {

padding: 0.5rem;

text-align: left;

border-bottom: 1px solid #ddd;

th {

background-color: #f2f2f2;

font-weight: bold;

/* 鼠标悬停效果 */

tr:hover {

background-color: #f5f5f5;

```

二 、响应式表格

为了在小屏幕上获得更好的显示效果 ，可以使用媒体查询来实现响应式表格 。

```css

/* 响应式表格 */

@media screen and (max-width: 600px) {

table , thead , tbody , th , td , tr {

display: block;

thead tr {

position: absolute;

top: -9999px;

left: -9999px;

tr {

margin-bottom: 0.5rem;

td {

/* Behave like a "row" */

border: none;

border-bottom: 1px solid #eee;

position: relative;

padding-left: 50%;

td:before {

/* Now like a table header */

position: absolute;

/* Top/left values mimic padding */

top: 0;

left: 6px;

width: 45%;

padding-right: 10px;

white-space: nowrap;

content: attr(data-label);

```

三 、带斑马纹的表格

为了增强表格的可读性 ，可以使用斑马纹（即交替行颜色） 。

```css

/* 斑马纹表格 */

.zebra-striped tbody tr:nth-child(odd) {

background-color: #f9f9f9;

.zebra-striped tbody tr:hover {

background-color: #f5f5f5;

```

四 、带边框的表格

如果希望表格有更明显的边框 ，可以添加以下样式 。

```css

/* 带边框的表格 */

.bordered {

border: 1px solid #ddd;

.bordered th ,

.bordered td {

border: 1px solid #ddd;

.bordered th {

border-bottom-width: 2px;

```

五 、总结

以上是一个针对 MOBI.css 的表格 CSS 样式表模板 ，它包含了基础表格样式 、响应式表格 、斑马纹表格和带边框的表格等多种样式 。开发者可以根据实际需求选择合适的样式 ，或者将它们组合在一起使用 ，以构建出美观 、易用且响应式的表格 。