I am using DropzoneJS and I want the template to be customized.
My template is as follows:
<div id="previewTemplate" style="display:none;">
<table class="dz-preview">
<tr>
<td class="col-md-10">
</td>
<td class="col-md-2">
X
</td>
</tr>
</table>
</div>
In dropzone.js, I have added a code as follows:
previewTemplate: $('#previewTemplate').html()
So, it is getting the inner HTML of the '#previewTemplate'.
I am getting all table in a single row.
Now, I want only two table in a row. That is, in each row I want two columns.
How can I achieve that?
well, when I wanted to put a table in a table I would specify a td tag or th tag inside the the td tag, then i'l put in two div tags that acts as the containers of the 2 tables and change their css properties to display "inline-block" or "table-td" and then i'l insert tables inside them, like this:
CSS
.table_inner_1 {
display: inline-block;
}
.table_inner_2 {
margin-left: 10px;
display: inline-block;
}
/*this below is just to target both td's of both of the inner tables*/
.table_inner_1 table tr td:not(:first-child), .table_inner_2 table tr td:not(:first-child)
{
padding-left: 5px;
}
HTML
<table>
<tr>
<td>
<td>
<div class="table_inner_1"><table><tr><td>dummy text</td><td>dummy text</td></tr>
</table></div><div class="table_inner_2"><table><tr><td>dummy text</td><td>dummy text</td></tr></table></div>
</td>
</td>
</tr>
</table>
this works to put tables in tables if that is what you wanted.
Related
I'd like to create a table with content from my database. I have a table without a header for multiple reasons (e.q. scrolling). Is it possible set the colums to the same width as the table before without JS? I dont want to add a class to each td element if possible. Not all columns have the same width. Nth-child is a bad solution because I have multiple tables.. :/
Here is a shorter version of my table:
table, th, td {
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
.h1 {
width: 125px;
}
.h2 {
width: 150px;
}
<table>
<tr>
<th class="h1">
<span>a</span>
</th>
<th class="h2">
<span>b</span>
</th>
</tr>
</table>
<table>
<tr>
<td>
<span>c</span>
</td>
<td>
<span>d</span>
</td>
</tr>
</table>
one of the tables has header and one of them doesn't. and in your css you do not specify the table without header... you should has a code like this
table , tr, td{}
I have been struggling to create a html table(I also use bootstrap). To make it easier to understand what I want to achieve, see picture below.
https://s15.postimg.org/ulq2gxap7/Hiro_Table.jpg
Depending on how many elements(lets say cars), the user selects, I want to create a column for each car. I have an array with the id of the selected itmes.
For now I do like this:
For(selected){
//get data from my object with id
.....
$('table thead tr').append(html);
$('table tbody').append(htmlData);
}
Which outputs:
-----car1-------------car2--------------car3
----1911-------------Italian------------Red
----1923 ------------Italian------------Yellow
----1923 -----------Swedish------------Green
I want as the picture I link to.
You didn't supplied the full HTML and JS code but basically between each TR with three TDs you need to append tr with td that have collspan=3
for example:
table td {
border: 1px solid #CCC;
text-align: center;
}
<table>
<tr>
<td colspan="3">italian</td>
</tr>
<tr>
<td>Fiat</td>
<td>Ferarri</td>
<td>1992</td>
</tr>
<tr>
<td colspan="3">German</td>
</tr>
<tr>
<td>BMW</td>
<td>VW</td>
<td>Mercedes</td>
</tr>
</table>
I am trying to create a tooltip on a web page. I want the user to be able to roll over a link, and when they do, display arbitrary html. In this case, its a simple table, containing some meta data. I have tried using jquery.tools, but I am not sure how to use it correctly. Here is the idea:
<a id="foo">FOO</a>
<div id="tooltip-content">
I am visible when the user hovers over FOO
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
....
</table>
</div>
When the user hovers over the link text FOO, I want the div and its content to become visible, floating near the mouse, I don't care if its above, below, left or right of the link text. It just needs to work. What is the simplest / best way to do this? I don't think I can use the title attribute of the link since I want to support an html table, is that correct? How do I do this?
Basic stuff, really. Here's a fiddle: http://jsfiddle.net/MqcMM/. The reason the table and the link are wrapped in a container is to allow hovering over the table once it is displayed.
HTML:
<div id = "container">
<a id="foo" href = "#">FOO</a>
<table>
<tr>
<td>Name</td>
<td>Foo</td>
</tr>
<tr>
<td>Value</td>
<td>Waka waka</td>
</tr>
</table>
</div>
CSS:
body {
padding: 50px;
}
#container {
position: relative;
display: table;
}
#container > table {
position: absolute;
white-space: nowrap;
border-collapse: collapse;
display: none;
}
#container > table td {
border: 1px dotted #000;
padding: 2px;
}
#container:hover > table {
display: table;
}
I have an AngularJS module with a page that shows a table of topics and subtopics. Each topic is a tbody element with 2 rows: one representing the topic name, and one containing a nested table where the rows are the subtopics. Each topic has an expand / collapse button that controls the subtopics, i.e. ng-shows / hides the row where the subtopics table is:
<table>
<tbody ng-repeat="topic in topics">
<tr>
<td>{{topic.name}}</td>
<td class="toggle-subtopics" ng-click="toggleSubtopics(topic)">Expand / collapse</td>
</tr>
<tr class="test-height" ng-show="topic.expanded">
<td colspan=2>
<table>
<tr ng-repeat="subtopic in topic.subtopics">
<td>{{subtopic.name}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
I'd like the subtopics row to appear / disappear with ng-animation, but the main problem is that no matter what I do, I can't seem to control the height of this row.
Fiddle
In order to control a td height you need to work on the line-height instead of height
Fiddle
Code Snippet:
.test-height {
line-height: 40px !important; /* This doesn't affect the height of the row */
}
Option 1:
Updated Code:
.table > tbody > tr >td {
line-height: 40px !important;
}
Updated Fiddle Option 1
Option 2:
If you do not want to mess with bootstrap global space you can create your own class and assign that to individual td
Updated Code:
.fixed-height {
line-height: 40px !important;
}
Updated Fiddle Option 2
Try This:
.test-height {
height: 3px;
overflow:hidden;
display:block;
}
I have a table where a row gets added every time I press a "Add" button. I have an "Edit" button which is placed in the first cell of the newly created row.
I want to highlight the row that is being edited. I know that I can get the current <tr> element like
var par = $(this).parent().parent();
But when I use,
par.css('border-color', 'red');
It does not change the color.
What mistake am I making and how should I highlight that particular row?
This is really about the styling of the <tr>. CSS doesn't like to style <tr>'s because they really only exist for semantics. In order to add a border to one, you need to make it display: block;.
Here is a jsFiddle and example code.
HTML
<table>
<tbody>
<tr><td>Some Content</td></tr>
<tr><td>Some Content</td></tr>
<tr>
<td>
Edit
</td>
</tr>
<tr><td>Some Content</td></tr>
<tr><td>Some Content</td></tr>
</tbody>
</table>
Javascript
$(".edit").click(function(e) {
$(this).closest('tr').toggleClass('editting');
e.preventDefault();
});
CSS
table tr {
display: block;
border: 1px solid rgba(0, 0, 0, 0);
}
.editting {
background: #FAA;
border: 1px solid red;
}
Please note how I used an rgba color to make the border opaque. There are other ways to do this, but if you leave the border off it causes the table to "jitter."
Assuming this refers to an element within the tr, then it will be better to use .closest() here
var par = $(this).closest('tr')