Html 表格的基本帮助答案

【问题标题】：Basic Help For Html TablesHtml 表格的基本帮助
【发布时间】：2021-02-23 02:54:28
【问题描述】：

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>

我想在 css 的标题表中有一个空单元格，如下图所示：

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

【问题讨论】：

问题出在哪里？对于空单元格，只需使用空单元格<td></td>。

标签： html css tabular

【解决方案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】：

您可能没有注意到第一行中的空单元格，因为下面第一列中的任何其他单元格中都没有内容。我移动了一个放错位置的</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>

检查更新的sn-p：

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 样式表。

【讨论】：

谢谢你的兄弟。我想在大小、字体和表格上完全喜欢这张照片。只是我想使用紫色和兰花色而不是绿色和浅绿色。我想要那个滴答声。最后一行。你能把它写完整吗？html &css 文件。我再次投票感谢你，兄弟:)
@RezaGhash 我更新了标记和样式，现在您可以自己更新单元格的内容和一些自定义样式，如边框、颜色或圆角 :)
兄弟，谢谢。但这不是我想要的。你能写下“每月价格”行并为我设置 100% 的表格宽度吗？我无法更改颜色，请将 td 颜色和存储空间更改为“F”为紫色，其余单元格为兰花。请使文本颜色为白色。你能兄弟吗？我很抱歉
我忘记了单元格大小。我想要它像图片一样大。你能把html和css文件放在一个zip文件里发给我吗？非常感谢

【解决方案3】：

我会给你一个使用 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>

我添加类 empty-cell 到 <th> 像图像示例，并添加到样式 background-color: transparent ; 以使单元格像没有一样，如果你的 css 表有边框，你可以添加 border: none 到样式，它取决于在你的样式表上

【讨论】：

也许你需要在你的问题中添加你的示例代码
这是我的 html Table

Smart Starter Smart Medium Smart Business Smart Deluxe

和 css : table > thead > tr >th>.empty-cell{ background-color: transparent ;边框：无； }
只需在您的问题上编写代码，并将 style.css 中的表格包含到您的 css 中
我做的有问题
你的桌子有任何 CSS 还是只有这样的空白？