I am currently in the process of programming a new website for myself and for this I am using a Wordpress template, to fill it with html and css code. Site is not responsive and the content is too big
code example here
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {height: 100%;}
body {min-height: 100%;}
table {border: hidden;}
p {text-align: Left; font-family: "Gill Sans", Sans-Serif; color: #FFFFFF; font-size: 1.3vw;}
</style>
</head>
<body>
<div style="overflow-x:auto;">
<table>
<td style="min-width:636px;"><img src="http://..._tunnelv-001.jpg" alt="'Tunnel Vision 1'"></td>
<td style="min-width:636px;"><img src="http://..._tunnelv-002.jpg" alt="'Tunnel Vision 2'"></td>
<td style="min-width:636px;"><img src="http://..._tunnelv-003.jpg" alt="'Tunnel Vision 3'"></td>
<td style="min-width:636px;"><img src="http://..._tunnelv-004.jpg" alt="'Tunnel Vision 4'"></td>
<td style="min-width:636px;"><img src="http://..._tunnelv-005.jpg" alt="'Tunnel Vision 5'"></td>
<td style="min-width:636px;"><img src="http://..._tunnelv-006.jpg" alt="'Tunnel Vision 6'"></td>
<td style="min-width:636px;"><img src="http://..._tunnelv-007.jpg" alt="'Tunnel Vision 7'"></td>
</table>
</div>
</body>
</html>
What are you trying to achieve? Scrollable table responsive doesn't say much. For responsive websites, all tables should auto-convert to list view.
You can write CSS as:
display: grid; grid-template-columns: 1em 1em 5ft 1fr 1fr 1fr ...
The number of columns specified with grid-template-columns should be same as the number of top-level divs.
Refer to the article here for easy setup: https://www.freecodecamp.org/news/https-medium-com-nakayama-shingo-creating-responsive-tables-with-pure-css-using-the-grid-layout-module-8e0ea8f03e83/
Related
I wanted to make a table similar to the one shown below:
However, as shown in the screenshot below, the HTML version came out differently. It is pretty close to what I want to do, but the left and right widths are not equal, as I want. Here is the screenshot:
Here is my code:
# Empty CSS file for your own CSS
table {
border-collapse: collapse;
width: #D19F24;
border: 1px solid #ddd;
}
td{
text-align: center;
font-weight: bold;
border: 1px solid black;
}
tr{
text-align: center;
font-weight: bold;
}
.head{
text-align: center;
}
.footer{
text-align: left;
}
tr:nth-child(even){background-color:#D19F24;}
<!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">
<title>Table responsive</title>
<meta name="description" content="made by Mitesh Chakma">
<meta name="author" content="Mitesh Chakma">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div style="overflow-x:auto;">
<table>
<tr>
<td colspan="2"><a style="color:#D19F24;">Fabric Details</a></td>
</tr>
<tr>
<td >Composition</td>
<td>NA</td>
</tr>
<tr>
<td>Colour <a style="color:#71B18F;">*</a></td>
<td>NA</td>
</tr>
<tr>
<td>Weight (g/m) <a style="color:#ff0000;">**</a></td>
<td>NA</td>
</tr>
<tr>
<td>Length (Meter)<a style="color: #ff0000;">***</a></td>
<td>NA</td>
</tr>
<tr>
<td>Width (cm)<a style="color:#ff0000;">****</a></td>
<td>NA</td>
</tr>
<tr>
<td>Name Edge</td>
<td>NA</td>
</tr>
<tr>
<td>Reference</td>
<td>NA</td>
</tr>
<tr>
<td>Additional Information</td>
<td>NA</td>
</tr>
<td colspan="2">
<p><a style="color:#ff0000;">*</a>Please be aware, the colour of the fabric on screen may differ from the actual fabric, depending on screen settings and other factors.</p>
<p><a style="color:#71B18F;">*</a>Other colours may be available. Please check our other listings, visit our eBay shop/website or contact us</p>
<p><a style="color:#ff0000;">**</a>The weight is always measured in grams per meter unless stated otherwise.</p>
<p><a style="color:#ff0000;">***</a>The length stated in the Fabric Details is what you will receive when you purchase buy it now. More Lengths/custom lengths maybe available so get in touch with us</p>
<p><a style="color:#ff0000;">****</a>The width is always in centimetres (CM) unless stated otherwise.</p>
</td>
</table>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
I am quite new to this and can't figure out how to achieve what I want. Furthermore, if I want to make this table responsive, what should I look to do?
You should be setting the width of your td elements to 50% so that they each occupy half of the available table space (and are thus of equal width). Additionally, your table's width value is currently a color (#D19F24)—try setting it to 100%.
table {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
}
td {
text-align: center;
width: 50%;
font-weight: bold;
border: 1px solid black;
}
tr {
text-align: center;
font-weight: bold;
}
.head {
text-align: center;
}
.footer {
text-align: left;
}
tr:nth-child(even) {
background-color: #D19F24;
}
<div style="overflow-x:auto;">
<table>
<tr>
<td colspan="2"><a style="color:#D19F24;">Fabric Details</a></td>
</tr>
<tr>
<td>Composition</td>
<td>NA</td>
</tr>
<tr>
<td>Colour <a style="color:#71B18F;">*</a></td>
<td>NA</td>
</tr>
<tr>
<td>Weight (g/m) <a style="color:#ff0000;">**</a></td>
<td>NA</td>
</tr>
<tr>
<td>Length (Meter)<a style="color: #ff0000;">***</a></td>
<td>NA</td>
</tr>
<tr>
<td>Width (cm)<a style="color:#ff0000;">****</a></td>
<td>NA</td>
</tr>
<tr>
<td>Name Edge</td>
<td>NA</td>
</tr>
<tr>
<td>Reference</td>
<td>NA</td>
</tr>
<tr>
<td>Additional Information</td>
<td>NA</td>
</tr>
<td colspan="2">
<p><a style="color:#ff0000;">*</a>Please be aware, the colour of the fabric on screen may differ from the actual fabric, depending on screen settings and other factors.</p>
<p><a style="color:#71B18F;">*</a>Other colours may be available. Please check our other listings, visit our eBay shop/website or contact us</p>
<p><a style="color:#ff0000;">**</a>The weight is always measured in grams per meter unless stated otherwise.</p>
<p><a style="color:#ff0000;">***</a>The length stated in the Fabric Details is what you will receive when you purchase buy it now. More Lengths/custom lengths maybe available so get in touch with us</p>
<p><a style="color:#ff0000;">****</a>The width is always in centimetres (CM) unless stated otherwise.</p>
</td>
</table>
</div>
As for making it responsive, that's a pretty broad query that is open to interpretation. You're already using a container with overflow-x set to auto, using relative units, and including a meta viewport tag, which aid in responsiveness.
I am working on Bootstrap. I wanted to make block inside table responsive.
As I resize the browser, block (bluebox) inside table is not adjusting according to screen size. I am new to Bootstrap.
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
min-width:267px;
width:100%;
display:block;
overflow:auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<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">
<div class="page_info">
<div class="breadcrumb">
Home
<span class="delimiter fa fa-arrow-circle-right"></span>
<span class="current" style="font-weight: 300;font-size: 12px;color: #666;">Link us</span></div>
<div class="page-title">
<h1 style="font-family: 'Roboto';font-size: 40px;line-height: 44px;color: #339933;font-weight: 300;">Link us</h1>
</div>
<div class="clearfix"></div>
</div>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">To link to us, please choose and save one of the logos displayed below, and link it to ' http://www.dubaiexporters.com '.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">As per our linking Policy, no prior permission is required to link 'DubaiExporters.com' from your website. However, we would like you to inform us (using the 'Contact us' option) about any links provided to this Portal so that you can be informed of any changes or updates.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">We encourage you to choose from the following graphic banners which can be conveniently placed on your website and linked to our Portal.</p>
<p><b style="color: #339933;padding-left:18px; font-size:20px;">Banners for Download </b></p>
<table class="table table-bordered" style="margin-left:18px;">
<thead>
<tr>
<th>Banner</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/dubaiexportersbanners/dubaiexporters_168x72.gif" alt="dubaiexporters.com 130x38 jpg" width="168" height="72">
</td>
<td>
<div class="bluebox"><a href="http://www.dubaiexporters.com/"><img src="http://www.dubaiexporters.com/images/dubaiexporters_168x72.gif" border="0" alt="Dubai Exporters - Directory of Exporters, Manufacturers & Suppliers" /></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Link: https://jsfiddle.net/1h0bt35f/4/
Update: Add word-break: break-all; to the CSS class.
Also, you would need to define width in percentage in order to make it responsive.
Currently, you have given bluebox a width of 267px.
Try the below code where you can set a min-width of 267px and it will handle automatically when it scales due to width as 100%.
.bluebox {
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow: hidden;
width: 100%;
display: block;
overflow: auto;
word-break: break-all;
}
Try this:
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
width: 26%;
display:block;
overflow:auto;
}
I'm using twitter bootstrap for a responsive design that contains a table with four columns. I want the table columns to have equal widths, so I have set td width to 25%.
I would think that the table rows would inherit their size from the table, and the table cells would then each be one quarter of that. This seems to work when the device width is 768px or greater. When the device width is smaller, the rows are sized based on the text in the largest cell, as opposed to the size of the parent table.
I have included some sample code below, with background coloring on the different elements to highlight the error (made apparent by resizing the window horizontally). The errors are highlighted in yellow (where the underlying table colour is visible).
Live example: http://pastehtml.com/view/cqrwl31z2.html
I have tested in Chrome and Safari.
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<!-- Bootstrap -->
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
td, th { width: 25% !important; }
table { background-color: yellow; }
tr { background-color: gray; }
th { background-color: aqua; }
td:nth-child(1) { background-color: red; }
td:nth-child(2) { background-color: green; }
td:nth-child(3) { background-color: blue; }
td:nth-child(4) { background-color: purple; }
</style>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<table class="span12">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<tr>
</tbody>
</table>
</div>
<div class="row">
<table class="span12">
<thead>
<tr>
<th>Longer Table</th>
<th>Headers In</th>
<th>This</th>
<th>Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
[class*="span"], .uneditable-input[class*="span"],
.row-fluid [class*="span"] {
display: table;
}
Maybe it's not a good idea to use grid classes on a table. Instead, use .span12 on a wrapper div and set the table to width: 100%.
Put a width on your table.
http://jsfiddle.net/nEeKQ/4/
table {
background-color: yellow;
width:100%;
}
Make sure any parent containers have the width set at 100%, in addition to the table having either an attribute width="100%" or style="width:100%".
When you zoom or the device width becomes greater the specified width it has no space to expand as width is given as % and not as px,so the best way to overcome this is to use
min-width:100px
for the td or th which will be the minimum width it will take even when the device width exceeds.
how do I get my link to have the same height and width as the parent tag, where the parent tags dimensions are variable?
I found this question here, where Gaurav Saxena made a post that worked at first - until I added the DOCTYPE for HTML5. If I do that, it not work in Firefox 8 anymore (it continues to work in Chrome, though).
So here is the complete example:
<!DOCTYPE html>
<head>
<style type="text/css">
.std {width: 200px; border: solid 1px green; height: 100%}
.std a {display: inline-block; height:100%; width:100%;}
.std a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td class="std">
<a href="http://www.google.com/">Cell 1<br>
second line</a>
</td>
<td class="std">
Cell 2
</td>
<td class="std">
Cell 3
</td>
<td class="std">
Cell 4
</td>
</tr>
</tbody>
</table>
</body>
Thanks in advance for your help!
$('td a').each(function(){
$(this).css({
'width': $(this).parent().width(),
'height': $(this).parent().height()
});
});
Run on document DOM load.
This doesn't work because you have a percent height of a percent height of no height. To clarify, you have height: 100%; on the link, which will rely on the parent element's (the td) height. This is also 100%, which then relies on its parent's height, which is not set. Therefore, it does not have a width work off of. A fix for this would be to set a height on either the table or the tds.
Example: http://jsfiddle.net/8rRtZ/1/
Here is the relevant code (doesn't work):
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; width: 100%; height: 100% }
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
The reason is that I want a click anywhere in the table cell to check/uncheck the checkbox.
edits:
By the way, no javascript solutions please, for accessibility reasons.
I tried using display: block; but that only works for the width, not for the height
I have only tested this in IE 6, 7, 8 and FF 3.6.3.
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
tr {
height: 1px;
}
td {
border: 1px solid #000;
height: 100%;
}
label {
display: block;
border: 1px solid #f00;
min-height: 100%; /* for the latest browsers which support min-height */
height: auto !important; /* for newer IE versions */
height: 100%; /* the only height-related attribute that IE6 does not ignore */
}
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
</table>
</body>
</html>
The main trick here is to define the height of the rows so we can use a 100% height on their children (the cells) and in turns, a 100% height on the cells' children (the labels). This way, no matter how much content there is in a cell, it will forcibly expand its parent row, and its sibling cells will follow. Since the label has a 100% height of its parent which has its height defined, it will also expand vertically.
The second and last trick (but just as important) is to use a CSS hack for the min-height attribute, as explained in the comments.
Labels are inline elements by default, so setting the width and height does nothing.
label { display: block; }
Would do it.
(However, the practice of putting the label around the checkbox it is supposed to be associated with, rather than explicitly using for, doesn't work in IE.)
The way you're applying labels doesn't make the form elements fully accessible. The label should be applied on the text associated with the form element, not just the form element. But there's nothing wrong with adding another label over the form element in order to make the entire area inside the TD clickable. This is actually desirable in order to give people with motor disabilities a bigger area to click. The <label for="whatever">Your label</label> is aimed for people who use screen readers to go through the Web form.
Also, there's nothing inaccessible about using JavaScript for enhancing accessibility. JavaScript can be used as long as it degrades gracefully and doesn't stops screen readers from reading the page. Also, there's no way to use CSS to fill the cell height on the older versions of IE (which are still in use by a big number of users) without royally screwing up the look of the page. This said, you should use jQuery to fill the entire TD. The reason I don't say JavaScript is that jQuery saves you a lot of headaches by hiding a lot of the complex coding that's necessary to make this work across the great majority of browsers.
Here's the fully cross browser accessible jQuery enabled code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Accessible Checkboxes</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table > tbody tr").each(function() { // Loop through all table rows
var Highest=0; // We want to find the highest TD... start at zero
var ThisHeight=0; // Initiate the temporary height variable (it will hold the height as an integer)
$($(this).children('td')).each(function() { // Loop through all the children TDs in order to find the highest
ThisHeight=parseInt($(this).height()); // Grab the height of the current TD
if (ThisHeight>Highest) { // Is this TD the highest?
Highest=ThisHeight; // We got a new highest value
}
});
$(this).children('td').css('height',Highest+'px'); // Set all TDs on the row to the highest TD height
});
});
</script>
<style type="text/css">
table {
border: 1px solid #000;
}
td, label {
height: 100%;
min-height: 100%;
}
th {
text-align: left;
}
td, th {
border: 1px solid #000;
}
label {
display: block;
}
</style>
</head>
<body>
<form action="whatever.shtml" method="post" enctype="multipart/form-data">
<table cellspacing="3" cellpadding="0" summary="A description of what's in the table.">
<thead>
<tr>
<th scope="col">Some column title</th>
<th scope="col">Another column title</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><label for="value1">Value 1<br />(a bit more info)</label></td>
<td><label><input id="value1" type="checkbox" /> </label></td>
</tr>
<tr>
<td scope="row"><label for="value2">Value 2</label></td>
<td><label><input id="value2" type="checkbox" /></label></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
You'll need to download jQuery and put the jquery.min.js file under a folder named js.
As you can see in the code, the form has been made fully accessible by adding a table summary, thead, th, scope, label for etc. Sure, it wasn't part of what you asked, but I added that as an extra bonus.
I did not find that the other answers worked in current browsers (2017), but absolutely positioning the label worked for me:
https://jsfiddle.net/4w75260j/5/
<html>
<head>
<style type="text/css">
td.checkbox {
position: relative;
}
td.checkbox label {
/* Take up full width/height */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Ensure the checkbox is centered */
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Checkboxes</td>
<td>Text</td>
</tr>
<tr>
<td class="checkbox"><label><input type="checkbox" /></label></td>
<td>Lorem ipsum dolor sit amet...</td>
</tr>
</table>
</body>
</html>
Note that this solution uses flexbox to center the checkbox; if you're targeting older browsers you may want to try the transform style of centering.
This code does what you want and it's tested on IE7+, FF, Google Chrome, Opera and Safari:
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td{border:1px solid #000;width:200px;height:200px;}
label{display:block;border:1px solid #f00;width:198px;height:198px;}
</style>
</head>
<body>
<table>
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
If your problem wasn't solved, hope this solves it! ;)
This answer is a bit "out there" - for it to be valid HTML you'd have to define your own DTD, and in any case it doesn't work in IE or Opera (works in Firefox). So it's not a viable solution by any measure, but I thought I'd share anyway just for interest:
The HTML:
<table>
<tr>
<td>Some content</td>
<label><input type="checkbox" /></label> <!-- no TD -->
</tr>
<tr>
<td>Some<br />multi-line<br />content</td>
<label><input type="checkbox" /></label>
</tr>
</table>
The CSS:
label { display: table-cell; }
I want a click anywhere in the table cell
<tr onclick="alert('process click here');"> ... </tr>
Try this CSS for your label
label {
border:1px solid #FF0000;
display:block;
height:35px;
}
Here is the live Demo http://jsbin.com/ehoke3/2/
In your row with "Value 1" you don't just have "a bit more info" you also include a break. It seems to me that all you really need to do is include a <br> in any label in the right column for when the content in the left column includes a <br>. Also, obviously <label> needs to have a display CSS attribute set to block.
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display: block;}
</style>
</head>
<body>
<table>
<tr><td>Some column title</td><td>Another column title</td></tr>
<tr><td>Value 1<br>(a bit more info)</td><td><label><input type="checkbox" /> <br> </label></td></tr>
<tr><td>Value 2</td><td><label><input type="checkbox" /></label></td></tr>
</table>
</body>
</html>
One note: you're not going to get perfect workalike performance in all the major browsers from the last 10 years--cough IE6--without resorting to things like JavaScript. I believe my solution is the best solution without resorting to JavaScript.
The solution below:
has <label> which fills entirely the <td> height
supports any cell height (i.e. no fixed height in pixels)
does only on CSS (i.e. no JavaScript)
is multibrowser (MSIE 7/8/9/10/11, Firefox 42, Chrome 46, Seamonkey 2.39, Opera 33, Safari 5.1.7)
<html>
<head>
<title>testing td checkboxes</title>
<style type="text/css">
td { border: 1px solid #000; }
label { border: 1px solid #f00; display:block; min-height:2.3em;}
</style>
</head>
<body>
<table style="table-layout:fixed">
<tr>
<td>Some column title</td>
<td>Another column title</td>
</tr>
<tr>
<td>Value 1<br>(a bit more info)</td>
<td><label><input type="checkbox" style="vertical-align:-50%" /> </label></td>
</tr>
<tr>
<td>Value 2</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
</html>
Explanations:
the display:block makes the <label> to take the <td> full width
the min-height:2.3em; makes the <label> to take the <td> full height (the minimum height a little bit higher than two lines as there are two lines in the first cell of the row; you may need to increase, e.g. I use 3.3em in my code)
the vertical-align:-50% makes the checkbox to be aligned vertically at the center of the cell (this is only required if the cell content spans over less lines than the first cell of the row)
I found using display: table works for me. I tried (the previously suggested) display: table-cell and that didn't work.
td label {
display: table;
box-sizing: border-box;
width: 100%;
height: 100%;
}