Html 表的基本帮助

Question

table > thead > tr >th>.empty-cell{
  background-color: transparent ;
  border : none;
}

<html>
    <head><title>Table</title>
    <link rel="stylesheet" href="style.css">

</head>
    <body>
<table>
    <thead>
    <tr>
    <th class="empty-cell"></th>
    <th> Smart Starter </th>
    <th> Smart Medium </th>
    <th> Smart Business </th>
    <th> Smart Deluxe </th>

</thead>
<tbody>
</tr>


</table>

</body>

我想在 header table 和 css 中有一个空单元格，如下图所示：

谁能帮帮我？我是初学者。

Answer 1

我会给你举个例子使用 boostrap css

table > thead > tr > th.empty-cell{
  background-color: transparent ;
  border : none;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div style="padding: 20px;">
     <table class="table table-dark table-striped">
        <thead>
          <tr>
            <th class="empty-cell"></th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
              </tr>
        </thead>
        <tbody>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
          </tr>
          <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
          </tr>
        </tbody>
    </table>
</div>

我将 class empty-cell 添加到 <th> 就像图像示例一样，并添加到样式 background-color: transparent ; 以使单元格空无一物，如果您的 css table 有一个边框，你可以添加 border: none 样式，这取决于你的样式 table

Answer 2

您可能没有注意到第一行中的空单元格，因为下面第一列的任何其他单元格中都没有内容。我搬了一个错位的</tr>，在样式上做了一点整理：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<style>
table{
  border: 0;
  border-collapse: collapse;
}
th,td{
  border: 1px solid #000;
  text-align:center;
  padding: 5px;
}
th,td.greenc{
  background-color: #0c0;
}
th.empty{
  border: 0;
  background-color: transparent;
}
</style>
</head>

<body>
<table>
  <thead>
    <tr>
      <th class="empty"></th>
      <th> Smart Starter </th>
      <th> Smart Medium </th>
      <th> Smart Business </th>
      <th> Smart Deluxe </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="greenc"> Storage Space </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
    </tr>
    <tr>
      <td class="greenc"> B </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
    </tr>
    <tr>
      <td class="greenc"> C </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
    </tr>
    <tr>
      <td class="greenc"> D </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
    </tr>
    <tr>
      <td class="greenc"> E </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
    </tr>
    <tr>
      <td class="greenc"> F </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
    </tr>
  </tbody>
</table>
</body>
</html>

检查更新后的代码段：

table{
  border: 0;
  border-collapse: collapse;
}
th,td{
  border: 1px solid #000;
  text-align:center;
  padding: 5px;
}
th,td.greenc{
  background-color: #0c0;
}
th.empty{
  border: 0;
  background-color: transparent;
}

<table>
  <thead>
    <tr>
      <th class="empty"></th>
      <th> Smart Starter </th>
      <th> Smart Medium </th>
      <th> Smart Business </th>
      <th> Smart Deluxe </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="greenc"> Storage Space </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
    </tr>
    <tr>
      <td class="greenc"> B </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
    </tr>
    <tr>
      <td class="greenc"> C </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
    </tr>
    <tr>
      <td class="greenc"> D </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
      <td> Content </td>
    </tr>
    <tr>
      <td class="greenc"> E </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
    </tr>
    <tr>
      <td class="greenc"> F </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
      <td> &#10003; </td>
    </tr>
  </tbody>
</table>

然后您可以根据自己的喜好进一步自定义样式。在回答之前我们无法看到您的 style.css 文件：永远记住 CSS 是 cascade 样式 sheet.

Answer 3

这是一个没有 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>

Html 表的基本帮助

Basic Help For Html Tables

html

css

tabular