Jamie
Reputation: 9
Basic Help For Html Tables
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>I want to have a empty cell in header table in css like this pic:
Can anyone help me? I'm a very beginner.
Upvotes: 1
Views: 93
Answers (3)
Nevada
Reputation: 173
This is an exemple without Bootstrap, i used font-awesome for icon, look the complete code here 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>Upvotes: 1
MattAllegro
Reputation: 7345
You may have not noticed the empty cell in the first line because of no content in any other cell in the first column below. I have moved a misplaced </tr> and made a bit of order in the style:
<!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> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
<tr>
<td class="greenc"> F </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
</tbody>
</table>
</body>
</html>
Check the updated snippet:
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> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
<tr>
<td class="greenc"> F </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
<td> ✓ </td>
</tr>
</tbody>
</table>Then you can further customize the style as you prefer. We couldn't see your style.css file before answering: always remember that CSS is cascade style sheet.
Upvotes: 0
Fikfattt
Reputation: 448
i will give you example using boostrap css
table > thead > tr > th.empty-cell{
background-color: transparent ;
border : none;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>i add class empty-cell to <th> like image example , and add to style background-color: transparent ; to make the cell like nothing, if your css table have a border you can add border: none to style to, its depend on you style table
Upvotes: 0