[CSS] css table - Githubissues

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        /*使用Flex布局*/
        display: flex;
        /*垂直方向布局*/
        flex-direction: column;
      }
      body .tbl:first-child {
        border-top: red solid 1px;
      }
      .tbl {
        width: 50%;
        height: 100px;
        /*使用Flex布局，默认为水平方向布局*/
        display: flex;
        border-left: red solid 1px;
        border-right: red solid 1px;
        border-bottom: red solid 1px;
      }
      .cell {
        /*其实这里也可以将宽度设置为2%、5%、10%等，因为页面要展示7列，100 / 7 约等于14%，所以这里的宽度最好不超过14%(不过超过了，在页面展示上貌似也没什么问题，不知道会不会有潜在的问题)*/
        /*因为是约等于14%，所以还会剩余一些空间，我在下面定义了flex-grow的值为1，即剩余的空间，会被这7列平分*/
        /*如果这里没有设置宽度，那么当文本内容过多时，该列的宽度会自动扩大*/
        width: 1%;
        height: 100%;
        /*定义项目的放大比例，如果值为1，则所有的项目将等分剩余的空间*/
        /*因为当前是水平方向布局，所以等分的是剩余的width*/
        flex-grow: 1;
        display: flex;
        /*水平居中、垂直居中*/
        justify-content: center;
        align-items: center;
        /*换行*/
        word-break: break-all;
        word-wrap: break-word;
        white-space: normal;
        border-right: green solid 1px;
      }
      .tbl div:last-child {
        border-right: 0;
      }
      .fix-header {
        width: 30px;
        flex-grow: 0;
      }
    </style>
  </head>
  <body>
    <div class="tbl">
      <div class="cell fix-header">22</div>
      <div class="cell">2111111ddd11111111111111111112</div>
      <div class="cell">22</div>
      <div class="cell">22</div>
      <div class="cell">22</div>
      <div class="cell">2sssssssssssssssssssss2</div>
      <div class="cell">22</div>
    </div>
    <div class="tbl">
      <div class="cell fix-header">22</div>
      <div class="cell">2111111ddd1111111111111112</div>
      <div class="cell">22</div>
      <div class="cell">22</div>
      <div class="cell">22</div>
      <div class="cell">2sssssssssssssssssssss2</div>
      <div class="cell">22</div>
    </div>
    <div class="tbl">
      <div class="cell">22</div>
      <div class="cell">2111111ddd1111111111111112</div>
      <div class="cell">22</div>
      <div class="cell">22</div>
      <div class="cell">22</div>
      <div class="cell">2sssssssssssssssssssss2</div>
      <div class="cell">22</div>
    </div>
    <div class="tbl">
      <div class="cell">22</div>
      <div class="cell">2111111ddd1111111111111112</div>
      <div class="cell">22</div>
      <div class="cell">22</div>
      <div class="cell">22</div>
      <div class="cell">2sssssssssssssssssssss2</div>
      <div class="cell">22</div>
    </div>
  </body>
</html>
Flex布局实现table
david2tdw / blog

[CSS] css table #214
