react自适应可排序的table表格代码-html代码-BFW代码库

react自适应可排序的table表格代码

代码语言：html

所属分类：表格

代码描述：react自适应可排序的table表格代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
@import 'https://fonts.googleapis.com/css?family=Lato';
html {
  height: 100%;
}
body {
  font-family: Lato, sans-serif;
  line-height: 1.4;
  color: #3d3d3d;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  background-color: #efefef;
}
table {
  max-width: 50rem;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  background-color: #fff;
}
th {
  text-align: left;
}
th,
td {
  border: 1px solid #dfdfdf;
  padding: 1rem;
}
@media screen and (max-width: 600px) {
  .responsive-table {
    border: 0;
  }
  .responsive-table thead {
    display: none;
  }
  .responsive-table tbody {
    background-color: #efefef;
  }
  .responsive-table th,
  .responsive-table td {
    padding: 0.5rem;
    background-color: #fff;
  }
  .responsive-table tr {
    border-bottom: 1px solid #ddd;
    display: block;
    margin-bottom: 2rem;
  }
  .responsive-table tr:last-of-type {
    margin-bottom: initial;
  }
  .responsive-table td {
    display: block;
    border-bottom: none;
    text-align: right;
  }
  .responsive-table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}
</style>



</head>

<body>
  <div id="app"></div>
    

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/radium.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script>
   
      <script type="text/babel">
let data = [{
  "Title": "The Wizard of Oz",
  "Year": 1939,
  "Genre": "Fantasy"
}, {
  "Title": "Citizen Kane",
  "Year": 1941,
  "Genre": "Drama"
}, {
  "Title": "The Godfather",
  "Year": 1972,
  "Genre": "Drama"
}, {
  "Title": "Metropolis",
  "Year": 1927,
  "Genre": "Science"
}]

/*const styles = {
  outerStyles: {
    html: {
      backgroundColor: '#efefef',
      height: "100%"
    },
    body: {
      padding: "0 2rem",
      minHeight: "100%",
      //display: "flex",
      //justifyContent: "center",
      //alignItems: "center"  
    }
  },
  cell: {
    borderBottom: "1px solid #ddd",
    padding: "10px"
  },
  table: {
    width: "100%",
    maxWidth: "600px",
    borderCollapse: "collapse",
    backgroundColor: "white",
    margin: "10vh auto",
    border: "1px solid #ddd",
    '@media screen and (max-width: 400px)': {
      backgroundColor: "unset",
      border: "none"
    }
  },
  thead: {
.........完整代码请登录后点击上方下载按钮下载查看