PDA

View Full Version : responsive tables


NumNum
01-29-2016, 12:35 PM
Anyone here have a responsive html table code they want to share?

webmastersun
01-30-2016, 12:29 AM
Anyone here have a responsive html table code they want to share?

If you are using bootstrap then it's easy or you have to create your custom codes

Here's html codes with bootstrap integrated.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Responsive Tables</h2> < br/>
<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>Num</td>
<td>Num</td>
<td>28</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>

</body>
</html>

NumNum
01-30-2016, 08:43 AM
Here's html codes with bootstrap integrated.
[/HTML]

I was making tables with dreamweaver but they weren't responsive in the html module, its the bootstrap that enables that?

webmastersun
01-30-2016, 09:15 AM
I was making tables with dreamweaver but they weren't responsive in the html module, its the bootstrap that enables that?
What is the html module that you are mentioning? in dreamweaver?

if so, you need to save the codes and check it on real browsers ( like firefox, chrome..)

Of course you need to increase bootstrap libs :) to see how it works

NumNum
01-31-2016, 08:46 PM
What is the html module that you are mentioning?

The static html module in vB 5.

I want to create an invisible table with no headers to insert logos into each cell, like a 3x6 table with logos in each c ell, and each logo will be a hyperlink to the companies website. The borders should be invisible, and the page responsive.