如何在 CSS 中制作好表格 [关闭]答案

【问题标题】：How to made good table in CSS [closed]如何在 CSS 中制作好表格 [关闭]
【发布时间】：2021-02-26 06:02:12
【问题描述】：

我想要一张这样的桌子。我怎样才能做到这一点？我想要这样的绿色和浅绿色。我想用紫色和兰花

【问题讨论】：

标签： html css

【解决方案1】：

这是一个没有 Bootstrap 的例子。我使用 font-awesome 作为图标，在这里查看完整代码https://codepen.io/alex-grz/pen/KKNZvOZ。

table {
   font-family: sans-serif;
}
.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th {
  text-align:center;
   padding:1rem 3rem;
   font-size: .8rem;
}

.table > thead > tr > th:first-child {
  background-color:unset;
}

.table > thead > tr > th {
  border-radius: 6px 6px 0 0; 
}

.table > tbody > tr > th { 
  border-radius: 6px 0 0px 6px;
}

.table > thead > tr > th, .table > tbody > tr > th  {
  background-color:#9BD727;
  color:white; 
}

.table > tbody > tr > td {
   background-color:#DEF2CC;
  color:black;
}

.table>tfoot>tr>td {
  color: #9BD727;
  font-size:1rem;
}

.fa-check {
  color:#9BD727;
}

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  
<body>
  <table class="table">
    <thead>
      <tr>
        <th scope="col"></th>
        <th scope="col">Smart Starter</th>
        <th scope="col">Smart Medium</th>
        <th scope="col">Smart Buisiness</th>
        <th scope="col">Smart Deluxe</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <th scope="row">Storage Space</th>
        <td>512 MB</td>
        <td>1 GB</td>
        <td>2 GB</td>
        <td>4 GB</td>
      </tr>
      <tr>
        <th scope="row">Bandiwdth</th>
        <td>50 GB</td>
        <td>100 GB</td>
        <td>150 GB</td>
        <td>Unlimited</td>
      </tr>
      <tr>
        <th scope="row">MySQL Databases</th>
        <td>Unlimited</td>
        <td>Unlimited</td>
        <td>Unlimited</td>
        <td>Unlimited</td>
      </tr>
      <tr>
        <th scope="row">Setup</th>
        <td>19.90 $</td>
        <td>12.90 $</td>
        <td>free</td>
        <td>free</td>
      </tr>
      <tr>
        <th scope="row">PHP 5</th>
          <td><i class="fa fa-check"></i></td>
          <td><i class="fa fa-check"></i></td>
          <td><i class="fa fa-check"></i></td>
          <td><i class="fa fa-check"></i></td>
      </tr>
      <tr>
        <th scope="row">Ruby on Rails</th>
          <td><i class="fa fa-check"></i></td>
          <td><i class="fa fa-check"></i></td>
          <td><i class="fa fa-check"></i></td>
          <td><i class="fa fa-check"></i></td>
      </tr>
      <tfoot>
        <tr>
          <th scope="row">Price per month</th>
          <td>$ 2.90</td>
          <td>$ 5.90</td>
          <td>$ 9.90</td>
          <td>$ 14.90</td>
        </tr>
      </tfoot>
    </tbody>
    
  </table>

</body>
</html>

【讨论】：

哦，太棒了！非常感谢，上帝保佑你！
这很好。但是，由于问题中没有说明实际问题，因此问题很可能被搁置。值得注意的是，并非所有问题都在这里成为主题，如果您希望您的工作能够继续存在，最好回答已经付出明显努力的问题。

【解决方案2】：

利用引导表在 HTML 中创建干净的表。

https://getbootstrap.com/docs/4.0/content/tables/

也是一种选择 => 材质 UI

https://material-ui.com/

如果使用 react，请使用 react strap

https://reactstrap.github.io/components/tables/

【讨论】：

对不起兄弟。我找不到它。你能帮我做吗？
Stack Overflow 是一个收集知识和深入学习编码的地方。如果您愿意，请随时与我联系，我可以完成您的项目并付款。除此之外，我不相信你会在这里找到人来完成免费劳动
付款没问题。只需给我价格和 eth 地址！
在我的帐户上参考我的网站以获取联系信息

【解决方案3】：

只是为了复选标记，我使用了外部插件。你可以删除它。删除“head标签中的样式表”并用“✓”替换表格单元格中的i标签“<_i class="fa_fa_check">”；

<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
body{
overflow-x:hidden;
}
table{
width:60%;
margin:auto;
font-family: 'Ubuntu', sans-serif;
font-weight:bold;
}
table tr td, table th{
padding:10px 10px;
text-align:center;
background:#da70d6;
font-weight: 400;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
table th{
background-image: linear-gradient(to right, #6441A5 0%, #2a0845  51%, #6441A5  100%);
color:#fff;
text-shadow:1px 1px #000;
font-weight:800;
}
table tr:nth-child(1) th:nth-child(1){
background:none;
}
table tr:nth-child(15) td, table tr:nth-child(15) th{
background:none;
color:#6441A5;
font-size:1.5em;
text-shadow:1px 1px #000;
}
table td i{
color:#6441A5;
}

@media (max-width:900px){
table{
max-width:99%;
width:99%;
}
table tr td, table th{
font-size:0.7em;
}
table tr:nth-child(15) td, table tr:nth-child(15) th{
font-size:1em;
}
}

@media (max-width:450px){
table{
max-width:99%;
width:99%;
}
table tr td, table th{
font-size:0.6em;
}
table tr:nth-child(15) td, table tr:nth-child(15) th{
font-size:0.7em;
}
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th>Smart Starter</th>
<th>Smart Medium</th>
<th>Smart Business</th>
<th>Smart Deluxe</th>
<tr>
<tr>
<th>Storage Space</th>
<td>512MB</td>
<td>1GB</td>
<td>2GB</td>
<td>4GB</td>
<tr>
<tr>
<th>Band Width</th>
<td>50GB</td>
<td>100GB</td>
<td>150GB</td>
<td>Unlimited</td>
<tr>
<tr>
<th>MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<tr>
<tr>
<th>Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
<tr>
<tr>
<th>PHP 5</th>
<td>&#x2713;</td>
<td>&#x2713;</td>
<td>&#x2713;</td>
<td>&#x2713;</td>
<tr>
<tr>
<th>Ruby On Rails</th>
<td>&#x2713;</td>
<td>&#x2713;</td>
<td>&#x2713;</td>
<td>&#x2713;</td>
<tr>
<tr>
<th>Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
<tr>
</table>
<script>
</script>
</body>
</html>

【讨论】：

【解决方案4】：

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
body{
overflow-x:hidden;
}
table{
width:60%;
margin:auto;
font-family: 'Ubuntu', sans-serif;
font-weight:bold;
}
table tr td, table th{
padding:10px 10px;
text-align:center;
background:#da70d6;
font-weight: 400;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
table th{
background-image: linear-gradient(to right, #6441A5 0%, #2a0845  51%, #6441A5  100%);
color:#fff;
text-shadow:1px 1px #000;
font-weight:800;
}
table tr:nth-child(1) th:nth-child(1){
background:none;
}
table tr:nth-child(15) td, table tr:nth-child(15) th{
background:none;
color:#6441A5;
font-size:1.5em;
text-shadow:1px 1px #000;
}
table td i{
color:#6441A5;
}

@media (max-width:900px){
table{
max-width:99%;
width:99%;
}
table tr td, table th{
font-size:0.7em;
}
table tr:nth-child(15) td, table tr:nth-child(15) th{
font-size:1em;
}
}

@media (max-width:450px){
table{
max-width:99%;
width:99%;
}
table tr td, table th{
font-size:0.6em;
}
table tr:nth-child(15) td, table tr:nth-child(15) th{
font-size:0.7em;
}
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th>Smart Starter</th>
<th>Smart Medium</th>
<th>Smart Business</th>
<th>Smart Deluxe</th>
<tr>
<tr>
<th>Storage Space</th>
<td>512MB</td>
<td>1GB</td>
<td>2GB</td>
<td>4GB</td>
<tr>
<tr>
<th>Band Width</th>
<td>50GB</td>
<td>100GB</td>
<td>150GB</td>
<td>Unlimited</td>
<tr>
<tr>
<th>MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<tr>
<tr>
<th>Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
<tr>
<tr>
<th>PHP 5</th>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<tr>
<tr>
<th>Ruby On Rails</th>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<td><i class="fa fa-check"></i></td>
<tr>
<tr>
<th>Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
<tr>
</table>
<script>
</script>
</body>
</html>

【讨论】：

完美的餐桌！非常感谢。无论如何要在没有引导程序的情况下做到这一点吗？只使用 html css 吗？你也可以吗？