How can I also change the column borders in a HTML Table using Bootstrap CSS?
This is where I have gone so far:
Boostrap Pre-Defined Table
The table lays inside a jumbotron and I would like to change the table borders and lines so It can be more distinguishable. This is where I have gone so far.
As you can see, the table lines between columns remain the same. How can this be changed?
Any other suggestions on improving the Table Appearance are gratefully accepted
table.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>Employees</h2>
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
table.css
.jumbotron{
margin-top:250px
}
tr {
border: 3px solid gray;
}
Code is now in JsFiddle.
Try this
.jumbotron .table-bordered tbody tr {
border: 3px solid gray;
}
.jumbotron .table-bordered tbody tr td {
border: 3px solid gray;
}
.jumbotron .table-bordered tbody tr {
border: 3px solid gray;
}
.jumbotron .table-bordered thead tr {
border: 3px solid gray;
}
.jumbotron .table-bordered thead tr th {
border: 3px solid gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>Employees</h2>
<div class="row">
<div class="col-md-12">
<div class="pull-right">
<button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Add border left & right to td & th:
table td ,table th{
border-left: 3px solid gray !important;
border-right: 3px solid gray !important;
}
table td:first-child {
border-left: none;
}
table td:last-child {
border-right: none;
}
.table-bordered td, .table-bordered th {
border: 3px solid gray !important;
}
The reason why you are not being able to set column border is because of the CSS specificity.
Your rule is being overridden by more specific rules, the most specific one for <td> in your case is .table-bordered>tbody>tr>td which is set by the Bootstrap.
You have couple of options to how to deal with this situation:
Use more specific rule
Write rule that will override the one set by Bootstrap, for example:
HTML
<table id="employees-table" class="table table-bordered">
...
</table>
CSS
#employees-table td,
#employees-table th
{
border: 3px solid gray;
}
Use !important exception
Using !important is considered to be a bad practise, but for your case it might be the most quickest/easiest solution:
table td,
table th
{
border: 3px solid gray !important;
}
Related
I want to add borders to each of the sections in the table (Which means two borders separating the two sections. Assuming this table has headers already):
<table>
<section class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</section>
<section class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</section>
</table>
I was attempting with the following CSS code, but the border-bottom does not appear
section[class="physicists"] {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
}
Can anyone tell me what the issue is?
Use <tbody> instead of <section>
As others noted in the comments, <table> cannot contain <section> as its valid child element. Instead, <tbody> element is meant for this exact purpose.
1. An example with <th> as section heading
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
background-color: #f0f0f0;
}
tbody > tr > th {
background: #c6c8d2;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr>
<th colspan="3">Physicists</th>
</tr>
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr>
<th colspan="3">Martial Artists</th>
</tr>
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
2. An example without section heading
table {
border-collapse: collapse;
}
td {
padding: 5px;
background-color: #f0f0f0;
}
tbody {
border-top: 3px solid red;
border-bottom: 3px solid red;
}
<table>
<tbody class="physicists">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</tbody>
<tbody class="martial-artists">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</tbody>
</table>
Apply border-collapse: collapse; to the parent table
When cells are separated, the distance between cells is defined by the border-spacing property.
border-collapse determines how the table cells would handle their borders. If not set, it's separate by default. For details, see this MDN page.
First bug:
At first, <section> element can't be used that way.
The table can be embedded in the section but not the other way around.
Split it to two tables like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Eckert Művek Galéria</title>
</head>
<body>
<table class="physicists my-frame">
<tr class="Richard-Feynman">
<td>Richard Feynman</td>
<td>Image1</td>
<td>Descrption1</td>
</tr>
<tr class="Albert-Einstein">
<td>Albert Einstein</td>
<td>Image2</td>
<td>Descrption2</td>
</tr>
</table>
<table class="martial-artists my-frame">
<tr class="Bruce-Lee">
<td>Bruce Lee</td>
<td>Image3</td>
<td>Descrption3</td>
</tr>
<tr class="Chunk-Norris">
<td>Chunk Norris</td>
<td>Image4</td>
<td>Descrption4</td>
</tr>
</table>
<style>
.my-frame {
border-top: solid 3px;
border-bottom: solid 3px;
border-color: red;
width:100%;
margin-top:5px;
}
.my-frame td{
width:33%;
}
</style>
</body>
</html>
Second info:
This is not the best way to write selectors:
section[class="physicists"]{ /* ... */ }
Better is:
section.physicists{ /* ... */ }
I need to remove the border vertical of the table except outside as shown below with bootstrap
I tried
<table class="table no-footer worker-data table-bordered"....
.table td, .table th {
border: none;
}
But result
Go with the below approach.
Clear the right border for first child of row.
Clear the left border for last child.
Clear right and left border for all other other child ec=xcept the first and last child of row.
Working Example
.table td:first-child, .table th:first-child {
border-right: none;
}
.table td:last-child, .table th:last-child {
border-left: none;
}
.table td:not(:first-child):not(:last-child),
.table th:not(:first-child):not(:last-child) {
border-right: none;
border-left: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<table class="table no-footer worker-data table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
I've been working on a project for a few days now, and I keep coming across this problem. I have a table with data in it, and I want the padding to be 30px on each side, and the '.task-link' or 'header-6' to expand with the window. Instead the width of the div goes across the entire screen, and it doesn't look even, and it is killing me. Sorry, new to HTML, so cut me some slack please, I'm sure it's obvious, I've tried lots of different things to no success, and I don't see why it should be covering the whole screen. Anyway, here is my code:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div id="tablediv">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
</main>
</body>
Here is an example of what is happening now, and what I want it to look like.
now: https://gyazo.com/00870da7fa1d8642dde8814ab4bd3bac
what I want: https://gyazo.com/8c5a48ceb6a4e2470dbf10c686992fbc
The table goes all the way, side to side,with a padding of 30px on each side, as well as the Header 6 expands to match the extend of the screen, and when it gets smaller, I want only the Header 6 to get smaller.
You can use bootstrap responsive table. Here the .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px) and when viewing on anything larger than 768px wide, then it will display the table by using the full width of the screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>longtextlongtextlongtext</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
remove col-sm-8 and checkout bootstrap grid
https://getbootstrap.com/docs/4.0/layout/grid/
A bootstrap grid always has to go within a row, Also a grid persists of 12 columns.
for example:
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
This will give 3 identical columns with the same width
Snippet:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div class="row" id="tablediv">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
<div class="col-sm-2"></div>
</div>
</main>
</body>
As you can see, This makes a whitespace spot on both sides of your screen.
Also https://getbootstrap.com/docs/4.0/layout/grid/ gives a lot of information, check it out for sure.
I have the following html with a responsive table.
When the page is accessed via mobile, the user has to scroll horizontally to view the entire content, is there a bootstrap way to break the columns vertically so a mobile user does not have to scroll horizontally ?
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
<div class="container"> <h2>Table</h2> <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p> <div class="table-responsive"> <table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody> </table> </div> </div>
</body> </html>
The last example here (No More Tables) shows the desired behavior perfectly https://elvery.net/demo/responsive-tables/
though it is not done with bootstrap.
If anyone can shed light on how to achieve this with bootstrap, ill appreciate.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
<style>
.table-responsive{
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
</style>
<div class="container"> <h2>Table</h2> <p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p> <div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody> </table> </div> </div>
</body> </html>
no need to do anything only put css as i putted on style tag that work perfectly
i hope this work good.
thanks.
Use this way
#media screen and (max-width: 640px) {
table#customDataTable caption {
background-image: none;
}
table#customDataTable thead {
display: none;
}
table#customDataTable tbody td {
display: block;
padding: .6rem;
}
table#customDataTable tbody tr td:first-child {
background: #666;
color: #fff;
}
table#customDataTable tbody tr td:first-child a {
color: #fff;
}
table#customDataTable tbody tr td:first-child:before {
color: rgb(225, 181, 71);
}
table#customDataTable tbody td:before {
content: attr(data-th);
font-weight: bold;
display: inline-block;
width: 10rem;
}
table#customDataTable tr th:last-child,
table#customDataTable tr td:last-child {
max-width: 100% !important;
min-width: 100px !important;
width: 100% !important;
}
}
<table class="table" id="customDataTable">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
<tr>
<td data-th="#">1</td>
<td data-th="Firstname">Anna</td>
<td data-th="Lastname">Pitt</td>
<td data-th="Age">35</td>
<td data-th="City">New York</td>
<td data-th="Country">USA</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/lalji1051/ztrjqvL8/
An alternative solution is to use Bootstrap.
HTML:
<div class="col-md-1 " style="padding-top:10%">
<div class="row">
<div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell bold">
Compare Editions
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Lite
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Standard
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Premium
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-header-cell bold">
Professional
</div>
</div>
<div class="row">
<div class="col-md-2 offset-lg-1 col-sm-12 text-center feature-comparison-table-header-cell">
Monthly Flat Rate
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>Free</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$40/Month
</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$50/Month
</p>
</div>
<div class="col-md-2 col-sm-12 text-center feature-comparison-table-cell">
<p>
$60/Month
</p>
</div>
</div>
</div>
The key is then just stylizing it to look like a table
#pricing-detailed-section .feature-comparison-table-header-cell {
padding: 15px;
border: 1px solid #DFE1E5;
font-size: 1rem;
padding-top: 40px;
height:100px;
}
#pricing-detailed-section .bold {
font-weight:600;
}
#pricing-detailed-section .feature-comparison-table-cell {
height: 100px;
border: 1px solid
#DFE1E5;
background-color:#FFF;
display: table;
}
#pricing-detailed-section .feature-comparison-table-cell p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
When you switch to mobile, it'll fit everything vertically. Note the code for the paragraph section solves multi-line fields not being centered.
I am not able to set the table as same as the header. please help and thanks in advance.
code and image are below.enter image description here
<!-- This is the table Style-->
<style>
table {
width:100%;
}
th, td {
width: 100%;
border: 3px solid black;
border-collapse: collapse;
}
th, td {
width: 100%;
padding: 13px;
text-align: left;
}
table#t01 th {
width: 100%;
background-color: orange;
color: black;
font-size: 20px;
position: relative;
}
</style>
//this is the HTML code
<div>
<table id="t01">
<tr class="header">
<th>Name</th>
<th>Download</th>
</tr>
<tr class="data_table"></tr>
</table>
</div>
Your html is wrong, use :
<table>
<thead>
<tr class='header'>
<th>Name</th>
<th>Download</th>
</tr>
<thead>
<tbody>
<tr class='data_table'>
</tr>
</tbody>
</table>
Try Following code.
table {
width:100%;
}
th, td {
width: 100%;
border: 3px solid black;
border-collapse: collapse;
}
th, td {
width: 100%;
padding: 13px;
text-align: left;
}
table#t01 th {
width: 100%;
background-color: orange;
color: black;
font-size: 20px;
position: relative;
}
<table id="t01">
<tr class="header">
<th colspan="2">Name</th>
<th>Download</th>
</tr>
<tr class="data-table">
<td>Mp3</td>
<td>Download</td>
</tr>
<tr class="data-table">
<td>File</td>
<td>Download</td>
</tr>
</table>
You can use the Bootstrap framework. You may get almost everything for web designing :
Visit
getbootstrap
Example of a Bootstrap table.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>