文章/答案/技术大牛

发布

社区首页 >问答首页 >使用CSS网格创建基本表

问使用CSS网格创建基本表
EN

Code Review用户

提问于 2020-12-07 04:22:46

回答 2查看 103关注 0票数 4

试图改进我的HTML和CSS。

使用CSS网格创建基本表，以与此图像匹配：

请忽略行中的红色和绿色，一些行丢失了，因为它与react应用程序中的数据一起使用，而且由于我只关心HTML和CSS，所以我只复制了相关的内容。

在扩展最后一行时遇到困难。

我知道这是个烂摊子还有很多需要改进的地方。

.App {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  background-color: rgb(243, 241, 241);
  border: 1px solid rgb(170, 167, 167);
  padding: 5px;
}

.table-border {
  background-color: rgb(170, 167, 167);
  border: 1px solid rgb(170, 167, 167);
  border-radius: 6px;
}

.table {
  display: grid;
  /* background-color:rgb(243, 241, 241); */
  border: 1px solid rgb(170, 167, 167);
  border-radius: 6px;
  font-size: 12px;
  grid-template-columns: auto auto auto auto;
  gap: 1px 0px;
  color: #444;
}

.table-footer {
  padding: 5px;
  background-color: rgb(243, 241, 241);
}

.th {
  margin-bottom: 3px;
}

.last {
  border-right: none;
}

.cell {
  padding: 5px;
  background-color: white;
}

.cell.th {
  background-color: rgb(243, 241, 241);
}

.top-left-corner {
  border-radius: 6px 0px 0px 0px;
}

.top-right-corner {
  border-radius: 0px 6px 0px 0px;
}

.bottom-right-corner {
  border-radius: 0px 0px 6px 0px;
}

.bottom-left-corner {
  border-radius: 0px 0px 0px 6px;
}

<div class="wrapper">
  <div class="table-border">
    <div class="table">
      <div class="cell th top-left-corner">Agent ID</div>
      <div class="cell th">Country</div>
      <div class="cell th">Address</div>
      <div class="cell th last top-right-corner">Date</div>
      <div class="cell">007</div>
      <div class="cell">Brazil</div>
      <div class="cell">
        Avenida Vieira Souto 168 Ipanema, Rio de Janeiro
      </div>
      <div class="cell">Dec 17, 1995, 9:45:17 PM</div>
      <div class="cell">005</div>
      <div class="cell">Poland</div>
      <div class="cell">Rynek Glowny 12, Krakow</div>
      <div class="cell">Apr 5, 2011, 5:05:12 PM</div>
      <div class="cell">007</div>
      <div class="cell">Morocco</div>
      <div class="cell">27 Derb Lferrane, Marrakech</div>
      <div class="cell">Jan 1, 2001, 12:00:00 AM</div>
      <div class="cell">005</div>
      <div class="cell">Brazil</div>
      <div class="cell">Rua Roberto Simonsen 122, Sao Paulo</div>
      <div class="cell">May 5, 1986, 8:40:23 AM</div>
      <div class="table-footer bottom-left-corner">10</div>
    </div>
  </div>
</div>

html

css

回答 2

Code Review用户

发布于 2021-06-25 14:37:28

在语义上，您最好使用table而不是div。事实上，这是可能的应用圆角的表格，仍然保持你需要的差距。

在下面的片段中，我完成了您需要的部分工作，但剩下的工作将留给您。

:root {
  --border: 1px solid rgb(170, 167, 167);
  --main-color: rgb(243, 241, 241);
}

.wrapper {
  border: var(--border);
  border-radius: 6px;
}

.table-border {
  color: #444;
  font-size: 9pt;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  text-align: left;
  overflow: hidden;
  border-width: 0 1px;
  border-spacing: 0 8px;
  border-collapse: separate;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

thead tr th {
  padding: 7px 10px;
  border-right: var(--border);
  background-color: var(--main-color);
  box-shadow: 0px -20px var(--main-color);
}

thead tr th:last-of-type {
  border: none;
}

tbody tr:first-of-type td {
  box-shadow: 0 -10px rgb(243 241 241);
}

tbody tr td {
  padding: 12px 10px 3px;
  background-color: white;
  border-top: var(--border);
}

tfoot tr td {
  padding: 5px 10px;
  text-align: right;
  border-top: var(--border);
  background-color: var(--main-color);
  box-shadow: 0px 20px var(--main-color);
}

<div class="wrapper">
  <table class="table-border">
    <thead>
      <tr>
        <th>Agent ID</th>
        <th>Country</th>
        <th>Address</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>007</td>
        <td>Brazil</td>
        <td>Avenida Vieira Souto 168 Ipanema, Rio de Janeiro</td>
        <td>Dec 17, 1995, 9:45:17 PM</td>
      </tr>
      <tr>
        <td>005</td>
        <td>Poland</td>
        <td>Rynek Glowny 12, Krakow</td>
        <td>Apr 5, 2011, 5:05:12 PM</td>
      </tr>
      <tr>
        <td>007</td>
        <td>Morocco</td>
        <td>27 Derb Lferrane, Marrakech</td>
        <td>Jan 1, 2001, 12:00:00 AM</td>
      </tr>
      <tr>
        <td>005</td>
        <td>Brazil</td>
        <td>Rua Roberto Simonsen 122, Sao Paulo</td>
        <td>May 5, 1986, 8:40:23 AM</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4">10 missions</td>
      </tr>
    </tfoot>
  </table>
</div>

看看border-spacing。

源

票数 1

Code Review用户

发布于 2021-06-25 20:34:37

点数：

提高标记的语义意义。基本上告诉浏览器有关页面中数据的更多机器可读的信息：。
- 这绝对是一张桌子，不是div的集合
- 有一些真实的日期、地址和国家有机器可读的some 3166-2代码。
- 通常，依靠合理的CSS选择而不是显式类来应用您的样式。
标题中的分隔符看上去有点像非折叠的边界，但是不可能将边界和折叠的边界同时存在于同一个表中，所以只需将边框添加到标题中的内跨度。
由于表主体确实有折叠边框，所以不能应用边框半径。添加一个容器并将其应用于该容器。

近似匹配如下：

<!DOCTYPE html>
<head>
    <style type="text/css">
      address {
        font-style: normal;
      }

      body {
        font-family: "Century Gothic", sans-serif;
        text-align: left;
        color: #565656;
        margin: 0;
        padding: 2em;
      }

      body, thead, tfoot {
        background-color: #FAFAFA;
      }

      .table-container, th, th span, td {
        border-color: #CCCCCC;
      }

      .table-container {
        margin: 0;
        padding: 0;
        overflow: hidden;
        border-width: 0.2em;
        border-style: solid;
        border-radius: 0.4em;
      }

      table {
        margin: 0;
        width: 100%;
        border-collapse: collapse;
      }

      thead {
        font-size: 1.4em;
      }

      th, tfoot td {
        border-width: 0.2em;
      }

      th {
        padding: 0.5em 0 0.5em 1em;
      }

      td {
        padding: 1em;
      }

      tbody td {
        border-width: 0.1em;
        border-style: solid none;
      }

      th {
        border-width: 0.2em;
        border-style: none none solid none;
      }

      th:not(:last-child) span {
        width: 100%;
        padding: 0.5em 0;
        display: block;
        border-width: 0.1em;
        border-style: none solid none none;
      }

      tbody {
        background-color: white;
        font-size: 1.5em;
      }

      tfoot {
        font-size: 1.4em;
        text-align: right;
      }

      tfoot td {
        border-style: solid none none none;
      }
    </style>
</head>

<body>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th><span>Agent ID</span></th>
          <th><span>Country</span></th>
          <th><span>Address</span></th>
          <th><span>Date</span></th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>005</td>
          <td><data value="BR">Brazil</data></td>
          <td>
            <address>Rua Roberto Simonsen 122, Sao Paulo</address>
          </td>
          <td>
            <time datetime="1986-05-05T08:40:23">May 5, 1986, 8:40:23 AM</time>
          </td>
        </tr>

        <tr>
          <td>007</td>
          <td><data value="BR">Brazil</data></td>
          <td>
            <address>Avenida Vieira Souto 168 Ipanema, Rio de Janeiro</address>
          </td>
          <td>
            <time datetime="1995-12-17T21:45:17">Dec 17, 1995, 9:45:17 PM</time>
          </td>
        </tr>

        <tr>
          <td>011</td>
          <td><data value="PL">Poland</data></td>
          <td>
            <address>swietego Tomasza 35, Krakow</address>
          </td>
          <td>
            <time datetime="1997-09-07T19:12:53">Sep 7, 1997, 7:12:53 PM</time>
          </td>
        </tr>

        <tr>
          <td>007</td>
          <td><data value="MA">Morocco</data></td>
          <td>
            <address>27 Derb Lferrane, Marrakech</address>
          </td>
          <td>
            <time datetime="2001-01-01T00:00:00">Jan 1, 2001, 12:00:00 AM</time>
          </td>
        </tr>

        <tr>
          <td>013</td>
          <td><data value="PL">Poland</data></td>
          <td>
            <address>Zlota 9, Lublin</address>
          </td>
          <td>
            <time datetime="2002-10-17T10:52:19">Oct 17, 2002, 10:52:19 AM</time>
          </td>
        </tr>

        <tr>
          <td>008</td>
          <td><data value="BR">Brazil</data></td>
          <td>
            <address>Rua tamoana 418, tefe</address>
          </td>
          <td>
            <time datetime="2005-11-10T13:25:13">Nov 10, 2005, 1:25:13 PM</time>
          </td>
        </tr>

        <tr>
          <td>005</td>
          <td><data value="PL">Poland</data></td>
          <td>
            <address>Rynek Glowny 12, Krakow</address>
          </td>
          <td>
            <time datetime="2011-04-05T17:05:12">Apr 5, 2011, 5:05:12 PM</time>
          </td>
        </tr>

        <tr>
          <td>003</td>
          <td><data value="MA">Morocco</data></td>
          <td>
            <address>Rue Al-Aidi Ali Al-Maaroufi, Casablanca</address>
          </td>
          <td>
            <time datetime="2012-08-29T10:17:05">Aug 29, 2012, 10:17:05 AM</time>
          </td>
        </tr>

        <tr>
          <td>009</td>
          <td><data value="MA">Morocco</data></td>
          <td>
            <address>atlas marina beach, agadir</address>
          </td>
          <td>
            <time datetime="2016-12-01T21:21:21">Dec 1, 2016, 9:21:21 PM</time>
          </td>
        </tr>

        <tr>
          <td>002</td>
          <td><data value="MA">Morocco</data></td>
          <td>
            <address>Riad Sultan 19, Tangier</address>
          </td>
          <td>
            <time datetime="2017-01-01T17:00:00">Jan 1, 2017, 5:00:00 PM</time>
          </td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td colspan="4">10 missions</td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>

票数 1

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/253162

复制

相似问题

问使用CSS网格创建基本表
EN

回答 2

Code Review用户

源

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS网格创建基本表EN

回答 2

Code Review用户

源

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS网格创建基本表
EN