I am studying CSS and testing a simple drag and drop functionality which comes with HTML5.
The page I have prepared looks OK in Chrome and Opera but totally wrong in Firefox and IE 11. In IE 11 it is even not possible to drag elements from the rightmost table onto a caption Table A nor Table B.
Why is it so? How is the height for td element magically set to a high value in Firefox/IE and not in Chrome/Opera? Why does dropping not work in IE 11?
function drag(event) {
event.dataTransfer.setData("rowId", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var playerId = event.dataTransfer.getData("rowId");
var tableBody = event.target.parentNode.getElementsByTagName("tbody");
if (tableBody) {
tableBody[0].appendChild(document.getElementById(playerId));
}
}
.vbtn {
background: none repeat scroll 0 0 #fafaff;
border: 1px solid #ddd;
border-radius: 6px;
border-spacing: 0;
box-shadow: 1px 1px 1px #eee;
padding: 1px 8px;
text-shadow: 0 2px 5px rgba(120, 120, 120, 0.3);
vertical-align: baseline;
white-space: nowrap;
}
a {
color: #175bb0;
text-decoration: none;
}
#wrapper {
width: 100%;
overflow: hidden;
}
#section-b {
position: relative;
margin-left: 10px;
width: 300px;
height: 400px;
float: left;
overflow: auto;
}
#section-a {
width: 235px;
float: left;
}
#selector {
margin-top: 10px;
margin-left: 10px;
float: left;
}
table {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
width: 100%;
border: 1px solid black;
}
th,
td {
width: 100%;
border: none;
}
thead {
background: lightgreen;
}
thead>tr {
position: relative;
}
tbody {
height: 400px;
background: none;
overflow: auto;
}
<!DOCTYPE html>
<head>
<title>Table scroll</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="wrapper">
<div id="header">
<p>Header...</p>
</div>
<div id="section-a">
<table id="table-a">
<caption ondrop="drop(event)" ondragover="allowDrop(event)">Table A</caption>
<thead>
<tr>
<th>Attribute 1</th>
<th>Attribute 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="table-b">
<caption ondrop="drop(event)" ondragover="allowDrop(event)">Table B</caption>
<thead>
<tr>
<th>Attribute 1</th>
<th>Attribute 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="selector">
<select>
<optgroup label="A">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</optgroup>
<optgroup label="B">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</optgroup>
</select>
</div>
<div id="section-b">
<table id="section-b-list">
<thead>
<tr>
<th>Attribute 1</th>
<th>Attribute 2</th>
</tr>
</thead>
<tbody>
<tr draggable="true" id="10" ondragstart="drag(event)">
<td>Value 1
</td>
<td>Value 2</td>
</tr>
<tr draggable="true" id="11" ondragstart="drag(event)">
<td>Value 3
</td>
<td>Value 4</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
This line should be removed:
tbody {
height: 400px;
}
The problem is
tbody {
height: 400px;
}
Try to remove it from your code and you'll see.
The problem with dragging and dropping in IE 11 was because the page was loaded from a local file! When I uploaded the file to a remote http server and accessed the file from there, the problem disappeared!
Related
I'm trying to emulate the code in Responsive Data Table to reformat a table where a row is vertical. My difference is that I want only a single row (an edited row) to be vertical and the rest normal.
tr.utr {
display: block;
border: 1px solid #ccc;
}
td.utd {
display: block;
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
}
td.utd:before {
position: absolute;
top: 6px;
left: 6px;
width: 60%;
padding-right: 10px;
white-space: nowrap;
}
td.utd:nth-of-type(1):before {
content: "First";
}
td.utd:nth-of-type(2):before {
content: "Second";
}
td.utd:nth-of-type(3):before {
content: "Third";
}
<table>
<thead>
<tr>
<th>Address</th>
<th>Status</th>
<th>Query</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=3>Copy of https://css-tricks.com/responsive-data-tables/</td>
</tr>
<tr>
<td>100 Central Ave.</td>
<td>Listings</td>
<td><input type="checkbox"></td>
</tr>
<tr class="utr">
<td class="utd">
<input type="text" value="123 Main Street" style="width:200px">
</td>
<td class="utd"><select>
<option value="1">Listings</option>
<option value="2">Solds</option>
</select></td>
<td class="utd"><input type="checkbox" checked="checked"></td>
</tr>
<tr>
<td>666 Oceanview Rd.</td>
<td>Listings</td>
<td><input type="checkbox" checked="checked"></td>
</tr>
</tbody>
</table>
Here's my Fiddle: https://jsfiddle.net/ImTalkingCode/k1pcc1nh/4/
In the fiddle, both the content label (eg. First) and the input fields are padded over by the 30% and are not aligned at all like the css-tricks example. Any help?
Screenshot with the bug
Based on the code from css tricks that you offered, I simply added the classes that we needed.
Resize your screen/browser to see the effect you wanted.
Generic Styling, for Desktops/Laptops
*/
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Hide table headers (but not display: none;, for accessibility) */
tr.utr { border: 1px solid #ccc;
display: flex;
flex-direction: column;}
td.utd {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
}
td.utd:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td.utd:nth-of-type(1):before { content: "First"; }
td.utd:nth-of-type(2):before { content: "Second"; }
td.utd:nth-of-type(3):before { content: "Third"; }
}
<table>
<thead>
<tr>
<th>Address</th>
<th>Status</th>
<th>Query</th>
</tr>
</thead>
<tbody>
<tr>
<td>100 Central Ave.</td>
<td>Listings</td>
<td><input type="checkbox"></td>
</tr>
<tr class="utr">
<td class="utd">
<input type="text" value="123 Main Street" style="width:100%">
</td>
<td class="utd"><select>
<option value="1">Listings</option>
<option value="2">Solds</option>
</select></td>
<td class="utd"><input type="checkbox" checked="checked"></td>
</tr>
<tr>
<td>666 Oceanview Rd.</td>
<td>Listings</td>
<td><input type="checkbox" checked="checked"></td>
</tr>
</tbody>
</table>
If you don't want it to be responsive, just delete the #media query.
I think this will help you
https://jsfiddle.net/31rg4ued/.
If you adjust the width of input element based on the padding, you will get the expected output
tr.utr {
display: block;
border: 1px solid #ccc;
}
td.utd {
display: block;
border: none;
border-bottom: 1px solid #eee;
position: relative;
}
td.utd:before {
}
td.utd:nth-of-type(1):before {
content: "First";
}
td.utd:nth-of-type(2):before {
content: "Second";
}
td.utd:nth-of-type(3):before {
content: "Third";
}
<table>
<thead>
<tr>
<th>Address</th>
<th>Status</th>
<th>Query</th>
</tr>
</thead>
<tbody>
<tr>
<td>100 Central Ave.</td>
<td>Listings</td>
<td><input type="checkbox"></td>
</tr>
<tr class="utr" style="padding-left:30%">
<td class="utd">
<input type="text" value="123 Main Street" style="width:calc(100% - 30%)">
</td>
<td class="utd"><select>
<option value="1">Listings</option>
<option value="2">Solds</option>
</select></td>
<td class="utd"><input type="checkbox" checked="checked"></td>
</tr>
<tr>
<td>666 Oceanview Rd.</td>
<td>Listings</td>
<td><input type="checkbox" checked="checked"></td>
</tr>
</tbody>
</table>
I have a table, and I want to put it inside a div so that the table is only shown until the div's height, and can be scrolled to view the rest of the table. Here is my code:
#listTimes {
margin-right: 0;
height: 100px;
}
#timesList table {
border-collapse: collapse;
margin: 0 auto;
right: 0;
left: 0;
}
#timesList table, td, th {
border: 1px solid black;
padding: 5px;
}
#timesList th {
text-align: left;
}
#session {
border-radius: 5px 5px 0 0;
height: 10px;
width: 20%;
margin: 0 auto;
}
<html>
<body>
<div class="listTimes">
<form id="session">
<select name="sessions" onchange="showUser(this.value)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</select>
</form>
<br>
<div id="timesList">
<!-- This is where the table is -->
<table>
<tr>
<th>No.</th>
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Right now, the table just appears the way it is. I want to set a height for both the form and the table together, and when I scroll to see the table, the form should follow me. I tried this using height attributes, overflow attributes, but none of them work.
Not sure what you mean by "the form should follow me" but I assume you mean it should stay fixed. In that case you need to add the height and the overflow to the #timesList element. If not, add it to the #listTimes element.
#listTimes {
margin-right: 0;
height: 100px;
}
#timesList {
height: 50px;
overflow: auto;
}
#timesList table {
border-collapse: collapse;
margin: 0 auto;
right: 0;
left: 0;
}
#timesList table, td, th {
border: 1px solid black;
padding: 5px;
}
#timesList th {
text-align: left;
}
#session {
border-radius: 5px 5px 0 0;
height: 10px;
width: 20%;
margin: 0 auto;
}
<html>
<body>
<div class="listTimes">
<form id="session">
<select name="sessions" onchange="showUser(this.value)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</select>
</form>
<br>
<div id="timesList">
<!-- This is where the table is -->
<table>
<tr>
<th>No.</th>
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Add the overflow-y property set height on #timesList
#timesList {
margin-right: 0;
height: 100px;
overflow-y: scroll;
}
.listTimes {
height: 100px;
overflow: hidden;
}
#timesList {
height: 100%;
overflow-y: scroll;
/* rough width of scrollbar */
padding-right: 20px;
margin-right: -20px;
}
#timesList table {
border-collapse: collapse;
margin: 0 auto;
right: 0;
left: 0;
}
#timesList table,
td,
th {
border: 1px solid black;
padding: 5px;
}
#timesList th {
text-align: left;
}
#session {
border-radius: 5px 5px 0 0;
height: 10px;
width: 20%;
margin: 0 auto;
}
<div class="listTimes">
<form id="session">
<select name="sessions" onchange="showUser(this.value)">
<option value="1">Session 1</option>
<option value="2">Session 2</option>
<option value="3">Session 3</option>
<option value="4">Session 4</option>
<option value="5">Session 5</option>
</select>
</form>
<br>
<div id="timesList">
<!-- This is where the table is -->
<table>
<tr>
<th>No.</th>
<th>foo</th>
<th>bar</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
<tr>
<th>1</th>
<th>fubar</th>
<th>lnrbaaet</th>
</tr>
</table>
</div>
</div>
I have a big problem with the spacing of columns in a table.
Here's what I'd like to get, spacing only between <td>:
Not working with margin, padding or border:
td {
padding-left: 7.5px;
padding-right: 7.5px;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
<td></td>
<td></td>
<td></td>
<td></td>
Not working with border-spacing:
And if use first-child and last-child, same problem as previous image.
Solution I found, but really dirty:
.spacer {
width: 15px;
height: 15px;
}
<td></td>
<div id="spacer"></div>
<td></td>
<div id="spacer"></div>
<td></td>
<div id="spacer"></div>
<td></td>
Use border-spacing: 15px 0px to generate only horizontal spacing;
To not display only left and right spacing, you can wrap the table in a div, and set margin: 0px -15px to table. Then, set overflow: hidden; to div how hide extra left and right spacing.
td {
padding-left: 7.5px;
padding-right: 7.5px;
background-color: red;
height: 40px;
border: 1px solid green;
width: 25%;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
table {
width: calc(100% + 30px);
table-layout: fixed;
border-spacing: 15px 0px;
background: green;
margin: 0px -15px;
}
.table-container {
overflow: hidden;
width: 400px;
margin: 0 auto;
}
<div class="table-container">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
1) You must use Standard structure for table when you want work with css on it.
change :
<td></td>
<td></td>
<td></td>
<td></td>
To:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
2) If want space between TDs add border-spacing:30px 0px; to table.
td {
padding-left: 7.5px;
padding-right: 7.5px;
background-color: orange;
}
td:first-child {
padding-left: 0;
}
td:last-child {
padding-right: 0;
}
table {
border-spacing:30px 0px;
}
<table>
<tr>
<td>TD1</td>
<td>TD2</td>
<td>TD3</td>
<td>TD4</td>
</tr>
</table>
Use <div> and margin instead.
.table {
width: 100%;
height: 500px;
}
.row {
width: 100%;
height: 100%;
}
.cell {
float: left; /* make the divs sit next to each other like cells */
background: red;
width: calc(25% - 12px); /* 4 cells so 25% but minus 12 because we have 3 x 15px margins divided by 4 cells which is 11.25 but decimals can cause issues in some browsers */
height: 100%;
margin-left: 15px;
}
.cell:first-child {
margin-left: 0;
}
<div class="table">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
Try to use cellspacing attribute.
<table cellspacing="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
I have a table which is used for showing excel-like data. I need to absolutely position two icons in the top center of each row--I want to show edit/delete icons when the use hovers the mouse over any row.
When I tried adding a relative position to the TR and an absolute positioning my inner floating div, the css disregarding the relative positioning of the parent td and simply floated to the top of the screen:
http://jsfiddle.net/85aTs/2/
HTML
<table>
<tr>
<td>
fooasfdasdfasf
</td>
<td>
barasdfasfas
</td>
</tr>
<tr>
<td>
fooasfdasdfasf
</td>
<td>
barasdfasfas
</td>
<div class="absolute">
I should be in a row
</div>
</tr>
</table>
CSS:
table, td{
border: 1px solid #000;
}
tr {
position:relative;
}
.absolute {
position: absolute;
top: 0;
right: 0;
border: 1px solid #000;
background-color: yellow;
}
I am aware that this is not valid html as it is currently setup, but how can I achieve what I want without switching over to divs with table display properties?
Here's what I would do:
See working jsFiddle demo
HTML
<table>
<tr>
<td>
<div class="icons">
<img class="checkmark" />
<img class="crossmark" />
</div>
<table>
<tr>
<td>fooasfdasdfasf</td>
<td>barasdfasfas</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class="icons">
<img class="checkmark" />
<img class="crossmark" />
</div>
<table>
<tr>
<td>fooasfdasdfasf</td>
<td>barasdfasfas</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
table, td
{
border: 1px solid #000;
}
.icons
{
height: 16px;
text-align: center;
background: #bbb;
}
.checkmark
{
display: inline;
height: 16px;
width: 16px;
border: none;
background: url('http://www.actuary.com/directory/template/default/images/icon_checkmark.gif');
}
.crossmark
{
display: inline;
height: 16px;
width: 16px;
border: none;
background: url('http://researchautism.net/img/rating_icons/crossmark_sm.png');
}
RESULTS
Firstly apologies with my limited knowledge, I am just starting out in CF.
So I am trying to send out an html email with cfmail when a form query is satisfied.
The problem I am having is that the css I am embedding within the email head is either throwing up errors or just not formatting at all. Please could someone look at my code and tell me where I am going wrong.
Incidentally when I take out the # tags in the css it seems to work but the email sends with no formatting!!!
<cfmail to="customer email" from="xxxxxxx#gmail.com" subject="Your order at has been shipped" type="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style type="text/css">
body {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
body, td, th, input, textarea, select, a {
font-size: 12px;
}
p {
margin-top: 0px;
margin-bottom: 20px;
}
a, a:visited, a b {
color: #378DC1;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}
a img {
border: none;
}
#container {
width: 680px;
}
#logo {
margin-bottom: 20px;
}
table.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
table.list td {
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
table.list thead td {
background-color: #EFEFEF;
padding: 0px 5px;
}
table.list thead td a, .list thead td {
text-decoration: none;
color: #222222;
font-weight: bold;
}
table.list tbody td a {
text-decoration: underline;
}
table.list tbody td {
vertical-align: top;
padding: 0px 5px;
}
table.list .left {
text-align: left;
padding: 7px;
}
table.list .right {
text-align: right;
padding: 7px;
}
table.list .center {
text-align: center;
padding: 7px;
}
</style>
</head>
<body>
<div id="container">
<p>Your Order has been Shipped</p>
<table class="list">
<thead>
<tr>
<td class="left" colspan="2">text_order_detail;</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left"><b>text_order_id</b><br />
<b>text_date_added</b><br />
<b>text_payment_method</b><br />
<b>text_shipping_method</b>
</td>
<td class="left"><b>text_email</b><br />
<b>text_telephone</b><br />
<b>text_ip<br /></td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_instruction</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">comment</td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_payment_address</td>
<td class="left">text_shipping_address</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">payment_address</td>
<td class="left">shipping_address</td>
</tr>
</tbody>
</table>
<table class="list">
<thead>
<tr>
<td class="left">text_product</td>
<td class="left">text_model</td>
<td class="right">text_quantity</td>
<td class="right">text_price</td>
<td class="right">text_total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="left">product
<br />
<small>option</small>
</td>
<td class="left">product['model']</td>
<td class="right">product['quantity']</td>
<td class="right">product['price']</td>
<td class="right">product['total']</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="right"><b>total['title']</b></td>
<td class="right">total['text']</td>
</tr>
</tfoot>
</table>
<p>text_footer</p>
<p>text_powered</p>
</div>
</body>
</html>
</cfmail>
</cfif>
Two issues the first is you need to use ## in your CSS instead of #, otherwise ColdFusion tries to process those as variables. The second is you have an erroneous </cfif> at the bottom of your page, but that was probably just from when you copy and pasted your code.
I tested the code with ## instead of # and the email sent correctly on CF 9.0.1
You should stick to inline styles for HTML emails rather than having your styles presented the way you are doing.
E.G.
<td style="padding:10px;"></td>