Making an HTML table scalable across resolutions
Until now I had discarded the idea of using position:absolute for the div since when you add position:relative to a td with border-collapse, it made the borders invisible. After some googling, I found that the solution for that involves using background-clip:padding-box on the td. This however, causes the child div...
Python Beautiful Soup Table Data Scraping Specific TD Tags
python,table,web-scraping,beautifulsoup,html-table
Following should work as well - import pickle import math import urllib2 from lxml import etree from bs4 import BeautifulSoup from urllib import urlopen year = '2014' lastWeek = '2' favQB1 = "Tom Brady" favQBurl2 = 'http://www.nfl.com/player/tombrady/2504211/gamelogs' favQBhtml2 = urlopen(favQBurl2).read() favQBsoup2 = BeautifulSoup(favQBhtml2) favQBpass2 = favQBsoup2.find_all("table", { "summary" : "Game...
How to get table fully copied from html to MS Word?
Borders applied to tr elements are apparently not recognized, so you need to apply them to td instead. In your CSS, change tr:last-child to tr:last-child td and it should work.
How to show/hide hidden HTML table rows using JavaScript (no jQuery)
javascript,html,css,toggle,html-table
Pass your event handler a reference to the row that is clicked using this: <td><a href="#" onclick="toggleRow(this);"><img alt="Expand row" height="20px;" src="expand.png"></a></td> Then update your toggleRow function as follows: function toggleRow(e){ var subRow = e.parentNode.parentNode.nextElementSibling; subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none'; } You may want to consider creating...
Showing an array in a grouped table
javascript,angularjs,html-table
First of all, wild man @Morre is correct (albeit a little excited about his correctness) that what you have is not a JSON array but rather an array of objects. But semantics aside... While I'm confident there is a more elegant way of approaching your problem, here is one possible...
2 column table or definition list for semantically correct HTML?
html,html5,html-table,semantic-markup
In HTML5, the most specific element for your use case would be the dl element (bold emphasis mine): The dl element represents an association list consisting of zero or more name-value groups (a description list). Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or...
Javascript get the sum of each array seperate
javascript,arrays,xml,html-table
Probably not the cleanest and best way but here's what I did to get it working: document.write("<table><tr><th><st>Test Set ID</st></th><th>Hardware</th><th>Op Sys Version</th><th>App Build</th><th>Orientation</th><th>Number of Test Passed</th><th>Number of Test Failed</th></tr>"); var x = xml.getElementsByTagName("TestSet"); for (i = 0; i < x.length; i++) { testspassed = []; testsfailed = []; passedsum = 0;...
Adding a clickable table caption with jQuery
javascript,jquery,html,html-table
$(document).on('click', '.edit-select a', function() { // do stuff }); jQuery is only aware of the elements in the page at the time that it runs, so new elements added to the DOM are unrecognized by jQuery. To combat that use event delegation, bubbling events from newly added items up to...
getElement from table data in same row
<script> function test(o) { if (o.checked) { // add "num" class to your number td console.log(o.parentNode.parentNode.querySelector(".num").innerHTML); } } </script> <table> <tr class="taskRow"> <td colspan="8" style="padding-bottom:10px;"> <select> <option value="delete">writing delete</option> <option value="articleBan">writing ban</option> <option value="writerBan">writer ban</option> </select> <input type="submit" value="execute"> </td>...
Automatic Pagebreak in Dynamically generated TCPDF HTML page
php,pdf-generation,html-table,tcpdf,html-to-pdf
Found the solution. I had a TCPDF option misconfigured. Setting this made everything work as intended: $pdf->SetAutoPageBreak(true, 0); ...
Setting table column width in CSS (if necessary, JavaScript)
javascript,css,css3,html-table
You only need to adjust the first row of TDs in order to set the widths for all of them. I would suggest removing the thead once you clone it, since you really have no need for it anymore, and then reference the first row of the tbody and set...
MVC View change specified row bgcolor
asp.net-mvc,if-statement,html-table,asp.net-mvc-views
You just need to do it up where you are outputting the row. One way would be: <table> ... @foreach (var item in Model) { <tr style='background-color: @(item.field3 == 0 ? "gray" : "white");'> <td> @Html.DisplayFor(modelItem => item.field1) </td> <td> @Html.DisplayFor(modelItem => item.field2) </td> <td> @Html.DisplayFor(modelItem => item.field3) </td> }...
Calulate the sum of total present in a row - Dynamic HTML Table
Don't forget to add the same WHERE clause criteria from your first query to your Summary query SELECT A, B, C, D, E FROM [table] UNION SELECT SUM(A) AS A, SUM(B) AS B, SUM(C) AS C, SUM(D) AS D, SUM(E) AS E FROM [table] ...
How can I generate an HTML table from an DB2 XML column?
The XMLTABLE SQL/XML function can transform the XML document into a traditional multi-row result set that can be retrieved into a JSP via standard JDBC calls. This developerWorks article demonstrates the process. Here's a sample XMLTABLE call for your table and document structure: SELECT X.NAME, X.VERSION, X.FIXPACK, X.BUILDNUMBER FROM MGMT.SYSTEM,...
Unable to click button inside table row
html,css,twitter-bootstrap,button,html-table
Remove z-index: -1 from .main-panel.
css specify first tr in table asp.net datagrid
asp.net,css3,datagrid,html-table,internet-explorer-10
Try changing your css selector to be something like table.maintbl tbody tr:first-child In your original selector, it was looking for the .maintbl element, then a child table element, then tbody, then tr. Now it is looking for a table element with the .maintbl class (and then looking for child elements...
How to make table fit in parent div
Try this: #parent { border: 3px solid #f0f; width: 600px; } table#child2 { background: cyan; table-layout:fixed; width: 100%; } table#child2 td { white-space: normal; word-wrap: break-word; } td{ border: 2px solid #666; } ...
Do not add border first time HTML
html,css,row,border,html-table
In addition to the style you already have in your question, add :last-child to tr and then style the last td based on that. tr:last-child td { border: none!important; } Here's a fiddle: http://jsfiddle.net/8a0m19z7/...
Odd TABLE sizing behaviour
Tables are kind of weird, there's good reason that modern web development has steered away from them. Adding the css min-width property seems to do the trick for me, but I only tested in chrome. .tab-strip .tab-button td:first-child { background-color: green !important; width: 100px; min-width: 100px; } See updated fiddle...
Why does this jQuery not only not work, but break all the other jQuery?
jquery,sharepoint-2010,html-table
$(['id$ = foapalrow4]') <- seems like there is a typo here it should be $('[id$ = foapalrow4]') your code after edit: $(document).on("click", '[id$=btnAddFoapalRow]', function (e) { alert('you mashed the foapal button'); if ($('[id$=foapalrow3]').css('display') == 'none') { $('[id$=foapalrow3]').slideDown(); } else if ($('[id$ = foapalrow4]').css('display') == 'none') { $('[id$=foapalrow4]').slideDown(); } }); ...
Replace to another column if exits in MySql
If you want to empty the data in b_id, your query should be something like this: if($rs) // if b_id already exists { //First empty old b_id which has mapped already $sql2 = "UPDATE table_name SET b_id='' WHERE b_id='$b_id'"; $rs=parent::_executeQuery($sql2); } ...
Unable to Get Element with ID in VB.Net
Use the parent element ID under which the table is nested like below. Protected Sub CheckBox2_CheckedChanged(sender As Object, e As EventArgs) Dim tab As String Dim check As CheckBox = CType(sender, CheckBox) tab = check.Parent.Parent.Parent.ID Dim myTab As HtmlTable = CType(mydiv.FindControl(tab), HtmlTable) For Each cell As HtmlTableRow In myTab.Rows //My...
Dynamically add columns to table (with colResizable plugin)
Any reason why you need $timeout ? If you remove it then it will work myApp.directive('colResizeable', function($interval) { return { restrict: 'A', link: function(scope, elem) { elem.colResizable({ liveDrag: true, gripInnerHtml: "<div class='grip'></div>", draggingClass: "dragging", onDrag: function() { //trigger a resize event, so paren-witdh directive will be updated //$(window).trigger('resize'); } });...
echo an image inside html table using php
php,html,arrays,html5,html-table
you can try this : echo "<img src='treedir/$tffam' alt='some text' >"; ...
How to align elements of two seperate ng-repeats in a table
angularjs,table,angularjs-ng-repeat,html-table
Take a look at this plnkr, I think it's showing what you want. http://plnkr.co/edit/h9z5airokWFV5oxWt73z?p=preview html: <div ng-repeat="data in pTab"> <table> <thead> <tr> <th ng-repeat="headers in data.modelHeaders">{{headers}}</th> </tr> </thead> <tbody> <tr ng-repeat="modelArrays in data.modelData"> <td ng-repeat="specs in modelArrays">{{specs}}</td> </tr> </tbody> </table> </div> ...
How to sort table according to name
javascript,php,html,sorting,html-table
Solving this problem in jQuery would be quite simple. Solving it in pure JS would be incredibly complex perhaps impossible. I'd STRONGLY suggest learning jQuery as it is supported by all browsers and extends Javascript in ways you can't imagine. The learning curve is very steep at first but is...
how to properly insert with inside a table?
Update re-reading your structure you most likely need <table> <thead> <tr> <th>name</th> <th>age</th> <th>gender</th> </tr> </thead> <tbody id="contents"> <tr> <td>John</td> <td>12</td> <td>male</td> </tr> <tr> <td>Jess</td> <td>13</td> <td>female</td> </tr> </tbody> </table> Original answer You can't have tr as direct children of a div. You need to use a table...
Assigning css to an element based on the value in that element
There is no CSS selector that will allow you to style an element based on its contents, so you won't be able to do this purely in CSS. However, Knockout can do the styling for you as it binds the data: you can use a css binding or style binding....
jQuery UI draggable: get the underlaying element at drag-stop
jquery,html5,jquery-ui,html-table,jquery-ui-draggable
There is a neat little function wich will find you the element on a specific function: document.elementFromPoint(x, y); On SO I found a good solution to determine all elements on that position. I refer to this answer in my code: $('.value').draggable({ cursor: "move", containment: ".grid", snap: "td", start: function(event, ui)...
getting values of table column based on id
You can get the index of the #name element and then use it in the nth-child selector var ids = $('#name').index(); $('#content table tbody tr td:nth-child(' + (ids + 1) + ')').each(function() { console.log('seee:', $(this).text()); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="content"> <table border="1"> <thead> <tr> <th>Test1</th> <th>Test2</th> <th>Test3</th> <th id="name"...
max-width for cell in wide table
Here is one way of doing it using jQuery to determine when to start wrapping the text. The only hard-coded parameter is the max width of 500px. You need to wrap your content in the first column in a div. The trick is to initially force the div to expand...
How to parse JSON from file using PHP then extract as TABLE
php,arrays,json,file,html-table
Check my json because in your code you have an extra comma in the firstname line. Try this code: <?php $json = '[ { "lastname": "John", "firstname": "Michael" }, { "lastname": "Nick", "firstname": "Bright" }, { "lastname": "Cruz", "firstname": "Manny" } ]'; $obj = json_decode($json, true); echo '<table> <tr><td>Firstname</td><td>Lastname</td></tr>'; foreach($obj...
Add a small space between tables
css,asp.net,html5,html-table,repeater
You can change your Panel to include a bottom margin. SO change: <asp:Panel ID="Panel3" runat="server" BackColor="#ffffff" Height="125px" Style="margin-left: 1px" Width="800px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"> to <asp:Panel ID="Panel3" runat="server" BackColor="#ffffff" Height="125px" Style="margin-left: 1px;margin-bottom: 2px" Width="800px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"> ...
Drop down in HTML table and have selected value in table data in javascript
javascript,php,ajax,json,html-table
I don't know whether this is will help you or may be this is not the optimized approach but it will do the job . Can't you remove the not selected option and generate the json. I have added a temp div and cloned the table and added to that...
Absolute table with relative height and image inside
I think you need to calculate the 10% height in pixels Example using Jquery var height = $(window).height(); var tdheight = height / 10; $(".charimage").css("height", tdheight+"px"); Contain your image in the td img { max-width: 100%; max-height: 100%; margin: auto; display:block; top: 0; left: 0; bottom: 0; right: 0; overflow:hidden;...
How to “count” the number of matching results on a search table
You need to find the length of only visible tr elements after search. you can use :visible or :not(:hidden) selector to achieve this: var rowCount = $('#search-table >tbody >tr:visible').length; Working Demo ...
How to prevent PHP pushed HTML tables exceeding the length of the page
php,html,css,screen,html-table
Try to include this for your tags: td.wordbreak { word-break: break-all; width: NNNpx; } This should sort the problem of cells spiting out your table horizontally. Replace the NNN by a number in pixels, that could be a fraction of the total you need. So let's say you had only...
MySQL - How to show in multiple columns html table, single column of mysql table
php,html,mysql,mysqli,html-table
I am not a php guy but some algo might help.1) get the count of records for male /female "SELECT count(*)FROM nomes WHERE nome LIKE '$_POST[letra]%' AND sexo = 'f'; ..... same for 'male'. save this to mcount and fcount variables. if mcount >10 then noOfColms=mcount /10; i=0; put "<table>"...
AngularJS ng-repeat colspan rowspan issue
Using ng-if checking the $index using modulo (%) for the columns with a rowspan might do the trick: jsbin.com/jaxuvavaba
Is there a pure-CSS way to highlight a html table column on hover?
Looks like what you want is done by CSS Tricks Basically you just set a crazy high height on the TDs on hover and then give a background. Seems to be a pretty interesting thought to do this. They love their hacks. The table{ overflow: hidden; } is super key...
Make table size within TD same as containing TD
Here is a fiddle emulating the dynamically sized td, along with snippet to resize inner table http://jsfiddle.net/v6hg9vdt/ This is the only part of the fiddle that matters, the rest was just to resize the outer td var inner = $('.innerTable'); var setInnerSize = function(){ inner.width(inner.parent().width()); inner.height(inner.parent().height()); }; ...
Why are THs bolder than TDs and how to avoid it?
I checked your code snippet both in Firefox and Internet Explorer (latest versions) and indeed, there is a difference in how the boldness of the th elements is rendered by the two browsers. The best explanation that I can offer is that the CSS specification does not say anything about...
Why does cellpadding=“0” not remove vertical padding around small images? [duplicate]
It's because the image is inline and thus renders at the current line-height. Set line-height to 8px or set the image to block: td { line-height: 8px; } or .. td img { display: block; } ...
Crop Text in a td CSS
you may need text-overflow and turn span as a box : td.td2 span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } td.td2 span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } table { width:100%; } <table> <tr> <td class="td2" style="border-left-width: 1px;" align="center" width="30">28</td> <td class="td2" style="border-left-width: 0"> <div style="float: right;"> <small> <a...
CSS background property applied to HTML Input element within Table cell
html,css,background,html-table,html-input
You've not defined a height on the Input field, therefore it's smaller than the containing td td input { height:20px; } http://jsfiddle.net/oe2ofup6/2/...
“Splitting” a table?
My suggestion is to use DIVs instead of table, please see.. <DIV style="width:100%"> <DIV style="width:70%; float:left;">row1 - column1</DIV> <DIV style="width:30%; float:left;">row1 - column2</DIV> <DIV style="width:20%; float:left;">row2 - column1</DIV> <DIV style="width:80%; float:left;">row2 - column2</DIV> </DIV> likewise you can have columns with different widths. You can have your own css classes, I...
How to use operations based on the number of user inputs?
javascript,jquery,table,html-table
You need to use a shared variable in the loop $('#wam').click(function () { var total = 0, count = 0; $('input.mark').each(function () { var mark = this.value; var cp = $(this).parent().next().find('input.creditPoint').val(); var t = mark * cp || 0;//if both the fields are not entered don't add them if (t)...
How does one make one table column header taller than the rest?
The table sizing algorithm will force all the table cells in a row to take on the same height, no way around that. One way of doing it requires extra markup. Wrap your content in a wrapper and take it out of the normal content flow using absolute positioning. You...
scale html table before printing using css
css,html-table,printing-web-page
I ended up rewriting the whole table with percentage sizes applied as classes and then was able to scale the page for printing. Not sure why the browser was ignoring my print styles regarding the transform but converting the table from fixed sizes to proportional sizes has enabled me to...
thead style not applied
You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead. The <thead> element must have one or more <tr> tags inside. http://www.w3schools.com/tags/tag_thead.asp...
![]()
unwanted photo rotation
Run jhead -autorot on your JPG image. That's what I do to handle autorotation before putting my images on the web. This will rotate the image as specified by the camera's orientation sensor, then reset the orientation flag so that it will not be accidentally rotated again. http://www.sentex.net/~mwandel/jhead/usage.html (Note, I...
Is it possible to apply position: sticky to or element?
css,css-position,html-table,sticky
Yes, it is possible to apply position: sticky to thead or tr elements. The position property can be applied to all elements except table-column-group and table-column But no, it won't behave like you want: The effect of position: sticky on table elements is the same as for position: relative ...
How to add colspan and text in cell?
javascript,html-table,tablerow
my_row.insertCell(0).textContent = "my colspan text" doesn't return the cell, it returns the string assigned to textContent function test3() { //get the table id; var table = document.getElementById('my_table'); //create row var my_row = table.insertRow(-1); //create cell var total = my_row.insertCell(0); //set properties total.textContent = "my colspan text"; total.colSpan = 4; }...
One of the in dynamically created table has to be width unassigned to force other width
css,html5,twitter-bootstrap,razor,html-table
I found a work around for my issue. I just looped through the days and inserted blank td at the last day of the loop. Hence the space required by td is assigned at the end and sync remains as its needed.
create dynamically table from mysql result with rowspan
As you want to change the rowspan, you have to do 2 things : Check the next values in that column to know how many are the same Check the previous rowspan value to avoid printing a value that should not (because the previous one had a rowspan > 1)...
HTML spacing if value is empty
Your problem is that you got your semantics messed up. You try to build a table but then you put the whole table content in 1 cell and then you try to emulate the table in there by using a list. Just put 1 field in 1 table cell and...
Print table for loop error
java,jsp,for-loop,printing,html-table
put these line: out.print("<Table width=110% align=center border='1'>"); before the loop. and this line after the loop: out.print("</table>"); furthermore: add the tr tag inside the loop. so you get: out.print("<Table width=110% align=center border='1'>"); for (int i = 0; i < cards.size(); i++) { Card card = new Card(); card = cards.get(i);...
how get grand parent text in a table with jquery
javascript,jquery,table,html-table,parent
Use Jquery to bind the click event, then your $(this) will work. <table class="table table-striped"> <thead> <tr> <td>Name</td> <td>Delete</td> </tr> </thead> <tbody id="tabSelectUser"> <tr> <td> fabien </td> <td><a href="#" class="deleteBtn"> delete</a></td> </tr> </tbody> </table> Javascript: $(function() { $('.deleteBtn').click(aButtonPressed); }); function aButtonPressed(){ var prevCell =...
How to arrange table td using rowspan
html,css,twitter-bootstrap,html-table
I use this to generate the table: <table border="1" width="500"> <tr> <td rowspan="3">1</td> <td colspan="2">2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td rowspan="4">7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td>...
Aligning images in HTML tables
html,css,image,alignment,html-table
As mentioned in the following SO {Resize image proportionally with CSS?} You shouldn't try and constrain both dimensions and just set your width to 30% and your height to 'auto'. Give that a shot....
Is it possible to cross out cells in an HTML table?
Well, this is a bit hacky, but it works. Utilize linear-gradient Using background-image for the current cell, strike through under content table { min-width: 100%; } table td { border: 1px solid silver; position: relative; } table td.crossed { background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), red, transparent calc(50%...
Truncate cell contents when needed, otherwise keep the table as narrow as possible
OK, I found a solution. I hope to contribute code later. Strategy: Use a hidden table to glean the desired cell widths of the visible table. Tactic: In addition to the table that the user shall see, a hidden "shadow" table, with identical content, must be created directly above the...
Override table-specific attributes with CSS?
Try this: table{ border:0; border-collapse: collapse; border-spacing: 0; padding:0; } ...
Apply class to
You can search the table for p tags, then find the closest parent td and assign the class name. Using plain Javascript: // convert "Hello_blue" to "blue" function convertClassName(src) { return src.replace(/^.*?_/, ""); } var pTags = document.querySelectorAll("table p"); for (var i = 0; i < pTags.length; i++) { pTags[i].parentNode.className...
Extract a Cell/Td/tabledata value from a given row of a table using javascript/jquery
javascript,jquery,html,asp.net-mvc,html-table
You already have it since you are generating the HTML from server side, when the user clicks pass the id to the funcion to do whatever you want with it. <td> <a onclick="getId('@i.Id')">Edit</a> </td> function getId(id) {...} or if you prefer you can use something like this: <a onclick="getId(this)">Edit</a> function...
Make last td as row
If you want the last column of each row to appear, and you're willing to include explicit styles on all of the other columns, you can float them: td, th { display: block; float: left; /* for visibility only */ border: 1px solid grey; /* so we don't run out...
Bootstrap table with a sidebar
twitter-bootstrap,responsive-design,html-table
It looks like you've got some of the column classes on the wrong elements as @TomCat pointed out - maybe this will help: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Scrolling URL Hash</title> <meta name="description" content="Webpage for xxxx"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> </style>...
Focus on table cell/column
javascript,jquery,html,css,html-table
After the page is loaded and your data is genreated just redirect your page to the respective id. Say for example if it is thursday, get it from your data and just do the following: window.location = '#thursday'; this will focus thursday as you wanted. I have done a bin...
Can't print 9x9 table correctly
The best is what @Rizier says, but if you want to modify only your code then:- <table border=1> <tr> <?php for ($i = 1; $i < 82; $i++) { $arr[] = $i; } $j=1; //add a new count starts from 1 for ($i=0; $i<81; $i++) { echo '<td>'.$arr[$i].'</td>'; if ($j%9==0)...
How to make multiple left columns fixed and scroll the the rest columns in HTML table?
html,css,html5,css3,html-table
There is one jQuery Plugin "DataTable". This will help you to freeze any number of columns in your table. Check the tutorials here. http://www.datatables.net/extensions/fixedcolumns/ http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html Hope this solves your problem....
Problems putting a border on a HTML table
Try .withBorder { border: 1px solid black; } You should have defined type and color after size of the border....
Bootstrap table arrangement
Try like this: Demo HTML: <table class="table table-bordered"> <thead> <tr> <th rowspan="2">Heading</th> <th rowspan="2">Heading</th> <th colspan="4">Heading</th> </tr> <tr> <th>Heading</th> <th>Heading</th> <th>Heading</th> <th>SHeading</th> </tr> </thead> <tbody> <tr> <td>3546 </td> <td>89789</td> <td>3546</td> <td>789789</td>...
What CSS do I need to get this html to appear as it does in the original text?
You can change your <p> tags to <pre> tags, it preserves whitespace. Also, your line breaks should be <br/> not </br> body { background:black; } .marginalize { margin-left: 5em; margin-right: 5em; color: antiquewhite; } <pre class="marginalize"> BESSEMERS ULSTERS</pre> <pre class="marginalize"> KING ARTHUR. EMPEROR LUCIUS. KING LOT OF LOTHIAN. KING LOGRIS....
Force a line break after space in words in element
html,css,asp.net,gridview,html-table
You Can Use HTML <br> Tag to break like C2 <br> Sunday without Inverted Commas...
Unable to make the table body scroll
html,css,html5,css3,html-table
I managed to solve this trouble by using datatables. Here is a link for an example: http://datatables.net/examples/basic_init/scroll_y.html
Find specific value of input field inside a specified td
javascript,jquery,forms,html-table
Assuming there's only one <input> in the <td>, you should be able to find it using the selector you already have as the basis: var inpVal = thisObj.closest("tr").children('td:first').find('input').val() ...
Remove duplicate row from output table
You might be better of using group_concat: $query = mysql_query(" SELECT customer.customerId, customer.customerName, order.orderNo, group_concat(order.item SEPARATOR ',') as order_items FROM customer INNER JOIN orderInfo on orderInfo.customerId = customer.customerId GROUP BY customer.customerId "); And in your code, just replace the separator: while($order = mysql_fetch_assoc($query)) { echo '<tr> <td>'.$order['orderNo'].'</td> <td>'.$order['customerName'].'</td>...
HTML table with scrollbar inside bordered container
html5,css3,scrollbar,html-table
cross browser is a little problem, then you need javascript. but here is a start for you to play with using only css. webkit (works also in chrome) note: i added the height to force a scrollbar. <style> table{ width:300px; height:100px; direction:rtl; overflow:auto; display:inline-block; } ::-webkit-scrollbar { width: 20px; }...
Jquery split on row does not work if null
Have you tried changing selector to be this addBR($('.myClass:not(:empty)')); ...
Given a table whose headers have backgrounds, can you CSS-rotate only the text in the headers?
The closest I could come was to dispense with the borders and the border-spacing in the table. Giving the borders the style you need may be unattainable. The lines between the ths I simulated with an underline. .rotated-text { border-spacing: 0; } .rotated-text thead > tr { background-color: lightblue; }...
Displaying a nested array in an HTML table
php,html,arrays,nested,html-table
Judging from your array, this might be something like what you're looking for: <table border="1"> <thead> <tr> <th>Name</th> <th>Subject</th> <th>Test1 Marks</th> <th>Test2 Marks</th> <th>Total Marks</th> <th>Status</th> <th>Percentage</th> <th>Pass Count</th> <th>Total Percentage</th> </tr> </thead> <tbody> <?php foreach($arr as $name => $subjects): ?> <?php $i = 0; ?> <?php...
Making a table with “mysql_fetch_array();” not working properly
php,html,mysql,datatable,html-table
I add the lines that you need in yout code see the comments "// LINE ADDED". Try with this code: <?php include 'connection.php'; $queryroom = "SELECT * FROM rom"; $querystudent = "SELECT * FROM elev"; $queryspecial = "SELECT * FROM rom WHERE prosjektor = 1"; $resultroomm = mysql_query($queryRom); $resultstudent =...
Freeze table header while allowing dynamic widths
The approach to this is similar to your other question. Except in this case, the <tbody> is the viewport, and we'll need to give its rows display: table, so their widths can be manually set. I've added some JS to essentially clone the top rows with the most content and...
Is it wise or acceptable to create a table with a different number of columns (td) for each row (tr)
You do not have to include a colspan=, however, the size of the largest <td></td> will determine the width of the column as it is displayed. Different browsers (and releases) will render the table slightly differently (How the non-defined area is displayed).
Adding links to
If you want to put a link inside a <td> element, you just need to put a link inside a <td> element, like so: <td><a href="#">MY TEXT</a></td> ...
How to make a expand to fill space, without stretching parent if there is no space to fill?
jquery,html,css,height,html-table
What you need is basically to exclude the inner table from the document flow, that can be achieved using absolute positioning: table { border-collapse: collapse; } table, th, td { border: 1px solid black; } #test { overflow-y: scroll; position:absolute; top:0px; right:0; left:0; bottom:0; } <table style="width:100%"> <tr> <th colspan="4">This...
Identical CSS working on JSFiddle, broken in browser
css,responsive-design,html-table
Remove the media query tag @media only screen and (max-width: 800px) {}, it works fine after. UPDATE: Adding <!DOCTYPE html> fixed the problem. ...
Gather all email address from selected table cells
For getting all possible email targets ( some of the cells are empty or doesn't have a mailto address) You can collect the data with the filter & map functions. I made a quick demo and added the option to deselect a cell and a button to clear all: Demo:...
Html table with Row lines hidden
javascript,html,css,html-table
You need to set the css properties border and border-collapse on your table tag and set the right border for your td. table { border: 1px solid black; border-collapse: collapse; width: 100%; } td { border-right: 1px solid black; text-align: center; padding: 5px; } <table> <tr> <td> a </td> <td>...
How to element content into new element
You can use Jquery for this: $("#moveFrom").appendTo("#moveHere"); Refer appendTo JSFIDDLE DEMO...
How to use modulo operator for table row and col structure?
javascript,angularjs,html-table,modulo
Better solution is to have a if-condition for the repeat ng-if="$index%5" Update: Added - for filling rest of the columns if its less than 5 <span>{{basicInfoCustomFields[$parent.$index+i].name || "-"}}</span> Plunkr Demo var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.basicInfoCustomFields = [ {"name":"Anto"}, {"name":"Julie"}, {"name":"John"}, {"name":"Doe"}, {"name":"Ray"}, {"name":"Sassy"}, {"name":"Wright"}, {"name":"Fred"}, {"name":"Flintstone"},...
CSS Fixed column width with scroll bar
Two things: You have a missing ">" at the end of your closing </td>. You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td> The solution you are looking for is word-wrap: break-word; This will allow the content to...
Using Javascript prompts to dynamically create table (not working)
You have some errors in your code, for example: <table style = "width:100%" cellspacing="5" border="2"> You can not put html code like table inside head, you need to write this on body. var input[i]; //variable that holds the input values You can not define variables containing a key. The correct...
overlapping css of a table property with another
Classes are selected with a leading period in CSS: .clientOffer1 { ... } DEMO td { padding: 1px; line-height: 10px; text-align: center; /*background-color:#3C78B5;*/ vertical-align: auto; border: 1px solid #0088cc; width: 120px; } .clientOffer1 { border-left: 3px solid #0088cc; } If you are still having troubles, it would be because some...
Creating HTML table using PHP while loops to display data and allow user to submit to specific row
php,html,mysql,while-loop,html-table
$sub = intval($_POST['sub']); $selected = intval($_POST['selected']); if ($sub == 1){ mysql_query("INSERT INTO adoptionrequest(`userID`, `animalID`, `approved`) VALUES ('1','$selected','Awaiting Approval')"); if(mysql_errorno() > 0){echo mysql_error();} } echo '<form action="#" method="post" ><input type="hidden" name="sub" value="1"><table>'; $results = mysql_query("SELECT `animalID`, `name`,`type`,`dateofbirth`,`description`,`photo`,`available`,`owner` FROM `animal` WHERE `available` = 'Yes'");...
Table cell uses alot more width then it needs
html,css,table,html-table,newsletter
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right. Try putting border="1" onto your table definition to see what I mean. I'd suggest you use...
Update re-reading your structure you most likely need <table> <thead> <tr> <th>name</th> <th>age</th> <th>gender</th> </tr> </thead> <tbody id="contents"> <tr> <td>John</td> <td>12</td> <td>male</td> </tr> <tr> <td>Jess</td> <td>13</td> <td>female</td> </tr> </tbody> </table> Original answer You can't have tr as direct children of a div. You need to use a table...
Assigning css to an element based on the value in that element
There is no CSS selector that will allow you to style an element based on its contents, so you won't be able to do this purely in CSS. However, Knockout can do the styling for you as it binds the data: you can use a css binding or style binding....
jQuery UI draggable: get the underlaying element at drag-stop
jquery,html5,jquery-ui,html-table,jquery-ui-draggable
There is a neat little function wich will find you the element on a specific function: document.elementFromPoint(x, y); On SO I found a good solution to determine all elements on that position. I refer to this answer in my code: $('.value').draggable({ cursor: "move", containment: ".grid", snap: "td", start: function(event, ui)...
getting values of table column based on id
You can get the index of the #name element and then use it in the nth-child selector var ids = $('#name').index(); $('#content table tbody tr td:nth-child(' + (ids + 1) + ')').each(function() { console.log('seee:', $(this).text()); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="content"> <table border="1"> <thead> <tr> <th>Test1</th> <th>Test2</th> <th>Test3</th> <th id="name"...
max-width for cell in wide table
Here is one way of doing it using jQuery to determine when to start wrapping the text. The only hard-coded parameter is the max width of 500px. You need to wrap your content in the first column in a div. The trick is to initially force the div to expand...
How to parse JSON from file using PHP then extract as TABLE
php,arrays,json,file,html-table
Check my json because in your code you have an extra comma in the firstname line. Try this code: <?php $json = '[ { "lastname": "John", "firstname": "Michael" }, { "lastname": "Nick", "firstname": "Bright" }, { "lastname": "Cruz", "firstname": "Manny" } ]'; $obj = json_decode($json, true); echo '<table> <tr><td>Firstname</td><td>Lastname</td></tr>'; foreach($obj...
Add a small space between tables
css,asp.net,html5,html-table,repeater
You can change your Panel to include a bottom margin. SO change: <asp:Panel ID="Panel3" runat="server" BackColor="#ffffff" Height="125px" Style="margin-left: 1px" Width="800px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"> to <asp:Panel ID="Panel3" runat="server" BackColor="#ffffff" Height="125px" Style="margin-left: 1px;margin-bottom: 2px" Width="800px" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"> ...
Drop down in HTML table and have selected value in table data in javascript
javascript,php,ajax,json,html-table
I don't know whether this is will help you or may be this is not the optimized approach but it will do the job . Can't you remove the not selected option and generate the json. I have added a temp div and cloned the table and added to that...
Absolute table with relative height and image inside
I think you need to calculate the 10% height in pixels Example using Jquery var height = $(window).height(); var tdheight = height / 10; $(".charimage").css("height", tdheight+"px"); Contain your image in the td img { max-width: 100%; max-height: 100%; margin: auto; display:block; top: 0; left: 0; bottom: 0; right: 0; overflow:hidden;...
How to “count” the number of matching results on a search table
You need to find the length of only visible tr elements after search. you can use :visible or :not(:hidden) selector to achieve this: var rowCount = $('#search-table >tbody >tr:visible').length; Working Demo ...
How to prevent PHP pushed HTML tables exceeding the length of the page
php,html,css,screen,html-table
Try to include this for your tags: td.wordbreak { word-break: break-all; width: NNNpx; } This should sort the problem of cells spiting out your table horizontally. Replace the NNN by a number in pixels, that could be a fraction of the total you need. So let's say you had only...
MySQL - How to show in multiple columns html table, single column of mysql table
php,html,mysql,mysqli,html-table
I am not a php guy but some algo might help.1) get the count of records for male /female "SELECT count(*)FROM nomes WHERE nome LIKE '$_POST[letra]%' AND sexo = 'f'; ..... same for 'male'. save this to mcount and fcount variables. if mcount >10 then noOfColms=mcount /10; i=0; put "<table>"...
AngularJS ng-repeat colspan rowspan issue
Using ng-if checking the $index using modulo (%) for the columns with a rowspan might do the trick: jsbin.com/jaxuvavaba
Is there a pure-CSS way to highlight a html table column on hover?
Looks like what you want is done by CSS Tricks Basically you just set a crazy high height on the TDs on hover and then give a background. Seems to be a pretty interesting thought to do this. They love their hacks. The table{ overflow: hidden; } is super key...
Make table size within TD same as containing TD
Here is a fiddle emulating the dynamically sized td, along with snippet to resize inner table http://jsfiddle.net/v6hg9vdt/ This is the only part of the fiddle that matters, the rest was just to resize the outer td var inner = $('.innerTable'); var setInnerSize = function(){ inner.width(inner.parent().width()); inner.height(inner.parent().height()); }; ...
Why are THs bolder than TDs and how to avoid it?
I checked your code snippet both in Firefox and Internet Explorer (latest versions) and indeed, there is a difference in how the boldness of the th elements is rendered by the two browsers. The best explanation that I can offer is that the CSS specification does not say anything about...
Why does cellpadding=“0” not remove vertical padding around small images? [duplicate]
It's because the image is inline and thus renders at the current line-height. Set line-height to 8px or set the image to block: td { line-height: 8px; } or .. td img { display: block; } ...
Crop Text in a td CSS
you may need text-overflow and turn span as a box : td.td2 span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } td.td2 span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } table { width:100%; } <table> <tr> <td class="td2" style="border-left-width: 1px;" align="center" width="30">28</td> <td class="td2" style="border-left-width: 0"> <div style="float: right;"> <small> <a...
CSS background property applied to HTML Input element within Table cell
html,css,background,html-table,html-input
You've not defined a height on the Input field, therefore it's smaller than the containing td td input { height:20px; } http://jsfiddle.net/oe2ofup6/2/...
“Splitting” a table?
My suggestion is to use DIVs instead of table, please see.. <DIV style="width:100%"> <DIV style="width:70%; float:left;">row1 - column1</DIV> <DIV style="width:30%; float:left;">row1 - column2</DIV> <DIV style="width:20%; float:left;">row2 - column1</DIV> <DIV style="width:80%; float:left;">row2 - column2</DIV> </DIV> likewise you can have columns with different widths. You can have your own css classes, I...
How to use operations based on the number of user inputs?
javascript,jquery,table,html-table
You need to use a shared variable in the loop $('#wam').click(function () { var total = 0, count = 0; $('input.mark').each(function () { var mark = this.value; var cp = $(this).parent().next().find('input.creditPoint').val(); var t = mark * cp || 0;//if both the fields are not entered don't add them if (t)...
How does one make one table column header taller than the rest?
The table sizing algorithm will force all the table cells in a row to take on the same height, no way around that. One way of doing it requires extra markup. Wrap your content in a wrapper and take it out of the normal content flow using absolute positioning. You...
scale html table before printing using css
css,html-table,printing-web-page
I ended up rewriting the whole table with percentage sizes applied as classes and then was able to scale the page for printing. Not sure why the browser was ignoring my print styles regarding the transform but converting the table from fixed sizes to proportional sizes has enabled me to...
thead style not applied
You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead. The <thead> element must have one or more <tr> tags inside. http://www.w3schools.com/tags/tag_thead.asp...
![]()
unwanted photo rotation
Run jhead -autorot on your JPG image. That's what I do to handle autorotation before putting my images on the web. This will rotate the image as specified by the camera's orientation sensor, then reset the orientation flag so that it will not be accidentally rotated again. http://www.sentex.net/~mwandel/jhead/usage.html (Note, I...
Is it possible to apply position: sticky to or element?
css,css-position,html-table,sticky
Yes, it is possible to apply position: sticky to thead or tr elements. The position property can be applied to all elements except table-column-group and table-column But no, it won't behave like you want: The effect of position: sticky on table elements is the same as for position: relative ...
How to add colspan and text in cell?
javascript,html-table,tablerow
my_row.insertCell(0).textContent = "my colspan text" doesn't return the cell, it returns the string assigned to textContent function test3() { //get the table id; var table = document.getElementById('my_table'); //create row var my_row = table.insertRow(-1); //create cell var total = my_row.insertCell(0); //set properties total.textContent = "my colspan text"; total.colSpan = 4; }...
One of the in dynamically created table has to be width unassigned to force other width
css,html5,twitter-bootstrap,razor,html-table
I found a work around for my issue. I just looped through the days and inserted blank td at the last day of the loop. Hence the space required by td is assigned at the end and sync remains as its needed.
create dynamically table from mysql result with rowspan
As you want to change the rowspan, you have to do 2 things : Check the next values in that column to know how many are the same Check the previous rowspan value to avoid printing a value that should not (because the previous one had a rowspan > 1)...
HTML spacing if value is empty
Your problem is that you got your semantics messed up. You try to build a table but then you put the whole table content in 1 cell and then you try to emulate the table in there by using a list. Just put 1 field in 1 table cell and...
Print table for loop error
java,jsp,for-loop,printing,html-table
put these line: out.print("<Table width=110% align=center border='1'>"); before the loop. and this line after the loop: out.print("</table>"); furthermore: add the tr tag inside the loop. so you get: out.print("<Table width=110% align=center border='1'>"); for (int i = 0; i < cards.size(); i++) { Card card = new Card(); card = cards.get(i);...
how get grand parent text in a table with jquery
javascript,jquery,table,html-table,parent
Use Jquery to bind the click event, then your $(this) will work. <table class="table table-striped"> <thead> <tr> <td>Name</td> <td>Delete</td> </tr> </thead> <tbody id="tabSelectUser"> <tr> <td> fabien </td> <td><a href="#" class="deleteBtn"> delete</a></td> </tr> </tbody> </table> Javascript: $(function() { $('.deleteBtn').click(aButtonPressed); }); function aButtonPressed(){ var prevCell =...
How to arrange table td using rowspan
html,css,twitter-bootstrap,html-table
I use this to generate the table: <table border="1" width="500"> <tr> <td rowspan="3">1</td> <td colspan="2">2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td rowspan="4">7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td>...
Aligning images in HTML tables
html,css,image,alignment,html-table
As mentioned in the following SO {Resize image proportionally with CSS?} You shouldn't try and constrain both dimensions and just set your width to 30% and your height to 'auto'. Give that a shot....
Is it possible to cross out cells in an HTML table?
Well, this is a bit hacky, but it works. Utilize linear-gradient Using background-image for the current cell, strike through under content table { min-width: 100%; } table td { border: 1px solid silver; position: relative; } table td.crossed { background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), red, transparent calc(50%...
Truncate cell contents when needed, otherwise keep the table as narrow as possible
OK, I found a solution. I hope to contribute code later. Strategy: Use a hidden table to glean the desired cell widths of the visible table. Tactic: In addition to the table that the user shall see, a hidden "shadow" table, with identical content, must be created directly above the...
Override table-specific attributes with CSS?
Try this: table{ border:0; border-collapse: collapse; border-spacing: 0; padding:0; } ...
Apply class to
You can search the table for p tags, then find the closest parent td and assign the class name. Using plain Javascript: // convert "Hello_blue" to "blue" function convertClassName(src) { return src.replace(/^.*?_/, ""); } var pTags = document.querySelectorAll("table p"); for (var i = 0; i < pTags.length; i++) { pTags[i].parentNode.className...
Extract a Cell/Td/tabledata value from a given row of a table using javascript/jquery
javascript,jquery,html,asp.net-mvc,html-table
You already have it since you are generating the HTML from server side, when the user clicks pass the id to the funcion to do whatever you want with it. <td> <a onclick="getId('@i.Id')">Edit</a> </td> function getId(id) {...} or if you prefer you can use something like this: <a onclick="getId(this)">Edit</a> function...
Make last td as row
If you want the last column of each row to appear, and you're willing to include explicit styles on all of the other columns, you can float them: td, th { display: block; float: left; /* for visibility only */ border: 1px solid grey; /* so we don't run out...
Bootstrap table with a sidebar
twitter-bootstrap,responsive-design,html-table
It looks like you've got some of the column classes on the wrong elements as @TomCat pointed out - maybe this will help: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Scrolling URL Hash</title> <meta name="description" content="Webpage for xxxx"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> </style>...
Focus on table cell/column
javascript,jquery,html,css,html-table
After the page is loaded and your data is genreated just redirect your page to the respective id. Say for example if it is thursday, get it from your data and just do the following: window.location = '#thursday'; this will focus thursday as you wanted. I have done a bin...
Can't print 9x9 table correctly
The best is what @Rizier says, but if you want to modify only your code then:- <table border=1> <tr> <?php for ($i = 1; $i < 82; $i++) { $arr[] = $i; } $j=1; //add a new count starts from 1 for ($i=0; $i<81; $i++) { echo '<td>'.$arr[$i].'</td>'; if ($j%9==0)...
How to make multiple left columns fixed and scroll the the rest columns in HTML table?
html,css,html5,css3,html-table
There is one jQuery Plugin "DataTable". This will help you to freeze any number of columns in your table. Check the tutorials here. http://www.datatables.net/extensions/fixedcolumns/ http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html Hope this solves your problem....
Problems putting a border on a HTML table
Try .withBorder { border: 1px solid black; } You should have defined type and color after size of the border....
Bootstrap table arrangement
Try like this: Demo HTML: <table class="table table-bordered"> <thead> <tr> <th rowspan="2">Heading</th> <th rowspan="2">Heading</th> <th colspan="4">Heading</th> </tr> <tr> <th>Heading</th> <th>Heading</th> <th>Heading</th> <th>SHeading</th> </tr> </thead> <tbody> <tr> <td>3546 </td> <td>89789</td> <td>3546</td> <td>789789</td>...
What CSS do I need to get this html to appear as it does in the original text?
You can change your <p> tags to <pre> tags, it preserves whitespace. Also, your line breaks should be <br/> not </br> body { background:black; } .marginalize { margin-left: 5em; margin-right: 5em; color: antiquewhite; } <pre class="marginalize"> BESSEMERS ULSTERS</pre> <pre class="marginalize"> KING ARTHUR. EMPEROR LUCIUS. KING LOT OF LOTHIAN. KING LOGRIS....
Force a line break after space in words in element
html,css,asp.net,gridview,html-table
You Can Use HTML <br> Tag to break like C2 <br> Sunday without Inverted Commas...
Unable to make the table body scroll
html,css,html5,css3,html-table
I managed to solve this trouble by using datatables. Here is a link for an example: http://datatables.net/examples/basic_init/scroll_y.html
Find specific value of input field inside a specified td
javascript,jquery,forms,html-table
Assuming there's only one <input> in the <td>, you should be able to find it using the selector you already have as the basis: var inpVal = thisObj.closest("tr").children('td:first').find('input').val() ...
Remove duplicate row from output table
You might be better of using group_concat: $query = mysql_query(" SELECT customer.customerId, customer.customerName, order.orderNo, group_concat(order.item SEPARATOR ',') as order_items FROM customer INNER JOIN orderInfo on orderInfo.customerId = customer.customerId GROUP BY customer.customerId "); And in your code, just replace the separator: while($order = mysql_fetch_assoc($query)) { echo '<tr> <td>'.$order['orderNo'].'</td> <td>'.$order['customerName'].'</td>...
HTML table with scrollbar inside bordered container
html5,css3,scrollbar,html-table
cross browser is a little problem, then you need javascript. but here is a start for you to play with using only css. webkit (works also in chrome) note: i added the height to force a scrollbar. <style> table{ width:300px; height:100px; direction:rtl; overflow:auto; display:inline-block; } ::-webkit-scrollbar { width: 20px; }...
Jquery split on row does not work if null
Have you tried changing selector to be this addBR($('.myClass:not(:empty)')); ...
Given a table whose headers have backgrounds, can you CSS-rotate only the text in the headers?
The closest I could come was to dispense with the borders and the border-spacing in the table. Giving the borders the style you need may be unattainable. The lines between the ths I simulated with an underline. .rotated-text { border-spacing: 0; } .rotated-text thead > tr { background-color: lightblue; }...
Displaying a nested array in an HTML table
php,html,arrays,nested,html-table
Judging from your array, this might be something like what you're looking for: <table border="1"> <thead> <tr> <th>Name</th> <th>Subject</th> <th>Test1 Marks</th> <th>Test2 Marks</th> <th>Total Marks</th> <th>Status</th> <th>Percentage</th> <th>Pass Count</th> <th>Total Percentage</th> </tr> </thead> <tbody> <?php foreach($arr as $name => $subjects): ?> <?php $i = 0; ?> <?php...
Making a table with “mysql_fetch_array();” not working properly
php,html,mysql,datatable,html-table
I add the lines that you need in yout code see the comments "// LINE ADDED". Try with this code: <?php include 'connection.php'; $queryroom = "SELECT * FROM rom"; $querystudent = "SELECT * FROM elev"; $queryspecial = "SELECT * FROM rom WHERE prosjektor = 1"; $resultroomm = mysql_query($queryRom); $resultstudent =...
Freeze table header while allowing dynamic widths
The approach to this is similar to your other question. Except in this case, the <tbody> is the viewport, and we'll need to give its rows display: table, so their widths can be manually set. I've added some JS to essentially clone the top rows with the most content and...
Is it wise or acceptable to create a table with a different number of columns (td) for each row (tr)
You do not have to include a colspan=, however, the size of the largest <td></td> will determine the width of the column as it is displayed. Different browsers (and releases) will render the table slightly differently (How the non-defined area is displayed).
Adding links to
If you want to put a link inside a <td> element, you just need to put a link inside a <td> element, like so: <td><a href="#">MY TEXT</a></td> ...
How to make a expand to fill space, without stretching parent if there is no space to fill?
jquery,html,css,height,html-table
What you need is basically to exclude the inner table from the document flow, that can be achieved using absolute positioning: table { border-collapse: collapse; } table, th, td { border: 1px solid black; } #test { overflow-y: scroll; position:absolute; top:0px; right:0; left:0; bottom:0; } <table style="width:100%"> <tr> <th colspan="4">This...
Identical CSS working on JSFiddle, broken in browser
css,responsive-design,html-table
Remove the media query tag @media only screen and (max-width: 800px) {}, it works fine after. UPDATE: Adding <!DOCTYPE html> fixed the problem. ...
Gather all email address from selected table cells
For getting all possible email targets ( some of the cells are empty or doesn't have a mailto address) You can collect the data with the filter & map functions. I made a quick demo and added the option to deselect a cell and a button to clear all: Demo:...
Html table with Row lines hidden
javascript,html,css,html-table
You need to set the css properties border and border-collapse on your table tag and set the right border for your td. table { border: 1px solid black; border-collapse: collapse; width: 100%; } td { border-right: 1px solid black; text-align: center; padding: 5px; } <table> <tr> <td> a </td> <td>...
How to element content into new element
You can use Jquery for this: $("#moveFrom").appendTo("#moveHere"); Refer appendTo JSFIDDLE DEMO...
How to use modulo operator for table row and col structure?
javascript,angularjs,html-table,modulo
Better solution is to have a if-condition for the repeat ng-if="$index%5" Update: Added - for filling rest of the columns if its less than 5 <span>{{basicInfoCustomFields[$parent.$index+i].name || "-"}}</span> Plunkr Demo var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.basicInfoCustomFields = [ {"name":"Anto"}, {"name":"Julie"}, {"name":"John"}, {"name":"Doe"}, {"name":"Ray"}, {"name":"Sassy"}, {"name":"Wright"}, {"name":"Fred"}, {"name":"Flintstone"},...
CSS Fixed column width with scroll bar
Two things: You have a missing ">" at the end of your closing </td>. You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td> The solution you are looking for is word-wrap: break-word; This will allow the content to...
Using Javascript prompts to dynamically create table (not working)
You have some errors in your code, for example: <table style = "width:100%" cellspacing="5" border="2"> You can not put html code like table inside head, you need to write this on body. var input[i]; //variable that holds the input values You can not define variables containing a key. The correct...
overlapping css of a table property with another
Classes are selected with a leading period in CSS: .clientOffer1 { ... } DEMO td { padding: 1px; line-height: 10px; text-align: center; /*background-color:#3C78B5;*/ vertical-align: auto; border: 1px solid #0088cc; width: 120px; } .clientOffer1 { border-left: 3px solid #0088cc; } If you are still having troubles, it would be because some...
Creating HTML table using PHP while loops to display data and allow user to submit to specific row
php,html,mysql,while-loop,html-table
$sub = intval($_POST['sub']); $selected = intval($_POST['selected']); if ($sub == 1){ mysql_query("INSERT INTO adoptionrequest(`userID`, `animalID`, `approved`) VALUES ('1','$selected','Awaiting Approval')"); if(mysql_errorno() > 0){echo mysql_error();} } echo '<form action="#" method="post" ><input type="hidden" name="sub" value="1"><table>'; $results = mysql_query("SELECT `animalID`, `name`,`type`,`dateofbirth`,`description`,`photo`,`available`,`owner` FROM `animal` WHERE `available` = 'Yes'");...
Table cell uses alot more width then it needs
html,css,table,html-table,newsletter
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right. Try putting border="1" onto your table definition to see what I mean. I'd suggest you use...
css,css-position,html-table,sticky
Yes, it is possible to apply position: sticky to thead or tr elements. The position property can be applied to all elements except table-column-group and table-column But no, it won't behave like you want: The effect of position: sticky on table elements is the same as for position: relative ...
How to add colspan and text in cell?
javascript,html-table,tablerow
my_row.insertCell(0).textContent = "my colspan text" doesn't return the cell, it returns the string assigned to textContent function test3() { //get the table id; var table = document.getElementById('my_table'); //create row var my_row = table.insertRow(-1); //create cell var total = my_row.insertCell(0); //set properties total.textContent = "my colspan text"; total.colSpan = 4; }...
One of the in dynamically created table has to be width unassigned to force other width
css,html5,twitter-bootstrap,razor,html-table
I found a work around for my issue. I just looped through the days and inserted blank td at the last day of the loop. Hence the space required by td is assigned at the end and sync remains as its needed.
create dynamically table from mysql result with rowspan
As you want to change the rowspan, you have to do 2 things : Check the next values in that column to know how many are the same Check the previous rowspan value to avoid printing a value that should not (because the previous one had a rowspan > 1)...
HTML spacing if value is empty
Your problem is that you got your semantics messed up. You try to build a table but then you put the whole table content in 1 cell and then you try to emulate the table in there by using a list. Just put 1 field in 1 table cell and...
Print table for loop error
java,jsp,for-loop,printing,html-table
put these line: out.print("<Table width=110% align=center border='1'>"); before the loop. and this line after the loop: out.print("</table>"); furthermore: add the tr tag inside the loop. so you get: out.print("<Table width=110% align=center border='1'>"); for (int i = 0; i < cards.size(); i++) { Card card = new Card(); card = cards.get(i);...
how get grand parent text in a table with jquery
javascript,jquery,table,html-table,parent
Use Jquery to bind the click event, then your $(this) will work. <table class="table table-striped"> <thead> <tr> <td>Name</td> <td>Delete</td> </tr> </thead> <tbody id="tabSelectUser"> <tr> <td> fabien </td> <td><a href="#" class="deleteBtn"> delete</a></td> </tr> </tbody> </table> Javascript: $(function() { $('.deleteBtn').click(aButtonPressed); }); function aButtonPressed(){ var prevCell =...
How to arrange table td using rowspan
html,css,twitter-bootstrap,html-table
I use this to generate the table: <table border="1" width="500"> <tr> <td rowspan="3">1</td> <td colspan="2">2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td rowspan="4">7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td>...
Aligning images in HTML tables
html,css,image,alignment,html-table
As mentioned in the following SO {Resize image proportionally with CSS?} You shouldn't try and constrain both dimensions and just set your width to 30% and your height to 'auto'. Give that a shot....
Is it possible to cross out cells in an HTML table?
Well, this is a bit hacky, but it works. Utilize linear-gradient Using background-image for the current cell, strike through under content table { min-width: 100%; } table td { border: 1px solid silver; position: relative; } table td.crossed { background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), red, transparent calc(50%...
Truncate cell contents when needed, otherwise keep the table as narrow as possible
OK, I found a solution. I hope to contribute code later. Strategy: Use a hidden table to glean the desired cell widths of the visible table. Tactic: In addition to the table that the user shall see, a hidden "shadow" table, with identical content, must be created directly above the...
Override table-specific attributes with CSS?
Try this: table{ border:0; border-collapse: collapse; border-spacing: 0; padding:0; } ...
Apply class to
You can search the table for p tags, then find the closest parent td and assign the class name. Using plain Javascript: // convert "Hello_blue" to "blue" function convertClassName(src) { return src.replace(/^.*?_/, ""); } var pTags = document.querySelectorAll("table p"); for (var i = 0; i < pTags.length; i++) { pTags[i].parentNode.className...
Extract a Cell/Td/tabledata value from a given row of a table using javascript/jquery
javascript,jquery,html,asp.net-mvc,html-table
You already have it since you are generating the HTML from server side, when the user clicks pass the id to the funcion to do whatever you want with it. <td> <a onclick="getId('@i.Id')">Edit</a> </td> function getId(id) {...} or if you prefer you can use something like this: <a onclick="getId(this)">Edit</a> function...
Make last td as row
If you want the last column of each row to appear, and you're willing to include explicit styles on all of the other columns, you can float them: td, th { display: block; float: left; /* for visibility only */ border: 1px solid grey; /* so we don't run out...
Bootstrap table with a sidebar
twitter-bootstrap,responsive-design,html-table
It looks like you've got some of the column classes on the wrong elements as @TomCat pointed out - maybe this will help: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Scrolling URL Hash</title> <meta name="description" content="Webpage for xxxx"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> </style>...
Focus on table cell/column
javascript,jquery,html,css,html-table
After the page is loaded and your data is genreated just redirect your page to the respective id. Say for example if it is thursday, get it from your data and just do the following: window.location = '#thursday'; this will focus thursday as you wanted. I have done a bin...
Can't print 9x9 table correctly
The best is what @Rizier says, but if you want to modify only your code then:- <table border=1> <tr> <?php for ($i = 1; $i < 82; $i++) { $arr[] = $i; } $j=1; //add a new count starts from 1 for ($i=0; $i<81; $i++) { echo '<td>'.$arr[$i].'</td>'; if ($j%9==0)...
How to make multiple left columns fixed and scroll the the rest columns in HTML table?
html,css,html5,css3,html-table
There is one jQuery Plugin "DataTable". This will help you to freeze any number of columns in your table. Check the tutorials here. http://www.datatables.net/extensions/fixedcolumns/ http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html Hope this solves your problem....
Problems putting a border on a HTML table
Try .withBorder { border: 1px solid black; } You should have defined type and color after size of the border....
Bootstrap table arrangement
Try like this: Demo HTML: <table class="table table-bordered"> <thead> <tr> <th rowspan="2">Heading</th> <th rowspan="2">Heading</th> <th colspan="4">Heading</th> </tr> <tr> <th>Heading</th> <th>Heading</th> <th>Heading</th> <th>SHeading</th> </tr> </thead> <tbody> <tr> <td>3546 </td> <td>89789</td> <td>3546</td> <td>789789</td>...
What CSS do I need to get this html to appear as it does in the original text?
You can change your <p> tags to <pre> tags, it preserves whitespace. Also, your line breaks should be <br/> not </br> body { background:black; } .marginalize { margin-left: 5em; margin-right: 5em; color: antiquewhite; } <pre class="marginalize"> BESSEMERS ULSTERS</pre> <pre class="marginalize"> KING ARTHUR. EMPEROR LUCIUS. KING LOT OF LOTHIAN. KING LOGRIS....
Force a line break after space in words in element
html,css,asp.net,gridview,html-table
You Can Use HTML <br> Tag to break like C2 <br> Sunday without Inverted Commas...
Unable to make the table body scroll
html,css,html5,css3,html-table
I managed to solve this trouble by using datatables. Here is a link for an example: http://datatables.net/examples/basic_init/scroll_y.html
Find specific value of input field inside a specified td
javascript,jquery,forms,html-table
Assuming there's only one <input> in the <td>, you should be able to find it using the selector you already have as the basis: var inpVal = thisObj.closest("tr").children('td:first').find('input').val() ...
Remove duplicate row from output table
You might be better of using group_concat: $query = mysql_query(" SELECT customer.customerId, customer.customerName, order.orderNo, group_concat(order.item SEPARATOR ',') as order_items FROM customer INNER JOIN orderInfo on orderInfo.customerId = customer.customerId GROUP BY customer.customerId "); And in your code, just replace the separator: while($order = mysql_fetch_assoc($query)) { echo '<tr> <td>'.$order['orderNo'].'</td> <td>'.$order['customerName'].'</td>...
HTML table with scrollbar inside bordered container
html5,css3,scrollbar,html-table
cross browser is a little problem, then you need javascript. but here is a start for you to play with using only css. webkit (works also in chrome) note: i added the height to force a scrollbar. <style> table{ width:300px; height:100px; direction:rtl; overflow:auto; display:inline-block; } ::-webkit-scrollbar { width: 20px; }...
Jquery split on row does not work if null
Have you tried changing selector to be this addBR($('.myClass:not(:empty)')); ...
Given a table whose headers have backgrounds, can you CSS-rotate only the text in the headers?
The closest I could come was to dispense with the borders and the border-spacing in the table. Giving the borders the style you need may be unattainable. The lines between the ths I simulated with an underline. .rotated-text { border-spacing: 0; } .rotated-text thead > tr { background-color: lightblue; }...
Displaying a nested array in an HTML table
php,html,arrays,nested,html-table
Judging from your array, this might be something like what you're looking for: <table border="1"> <thead> <tr> <th>Name</th> <th>Subject</th> <th>Test1 Marks</th> <th>Test2 Marks</th> <th>Total Marks</th> <th>Status</th> <th>Percentage</th> <th>Pass Count</th> <th>Total Percentage</th> </tr> </thead> <tbody> <?php foreach($arr as $name => $subjects): ?> <?php $i = 0; ?> <?php...
Making a table with “mysql_fetch_array();” not working properly
php,html,mysql,datatable,html-table
I add the lines that you need in yout code see the comments "// LINE ADDED". Try with this code: <?php include 'connection.php'; $queryroom = "SELECT * FROM rom"; $querystudent = "SELECT * FROM elev"; $queryspecial = "SELECT * FROM rom WHERE prosjektor = 1"; $resultroomm = mysql_query($queryRom); $resultstudent =...
Freeze table header while allowing dynamic widths
The approach to this is similar to your other question. Except in this case, the <tbody> is the viewport, and we'll need to give its rows display: table, so their widths can be manually set. I've added some JS to essentially clone the top rows with the most content and...
Is it wise or acceptable to create a table with a different number of columns (td) for each row (tr)
You do not have to include a colspan=, however, the size of the largest <td></td> will determine the width of the column as it is displayed. Different browsers (and releases) will render the table slightly differently (How the non-defined area is displayed).
Adding links to
If you want to put a link inside a <td> element, you just need to put a link inside a <td> element, like so: <td><a href="#">MY TEXT</a></td> ...
How to make a expand to fill space, without stretching parent if there is no space to fill?
jquery,html,css,height,html-table
What you need is basically to exclude the inner table from the document flow, that can be achieved using absolute positioning: table { border-collapse: collapse; } table, th, td { border: 1px solid black; } #test { overflow-y: scroll; position:absolute; top:0px; right:0; left:0; bottom:0; } <table style="width:100%"> <tr> <th colspan="4">This...
Identical CSS working on JSFiddle, broken in browser
css,responsive-design,html-table
Remove the media query tag @media only screen and (max-width: 800px) {}, it works fine after. UPDATE: Adding <!DOCTYPE html> fixed the problem. ...
Gather all email address from selected table cells
For getting all possible email targets ( some of the cells are empty or doesn't have a mailto address) You can collect the data with the filter & map functions. I made a quick demo and added the option to deselect a cell and a button to clear all: Demo:...
Html table with Row lines hidden
javascript,html,css,html-table
You need to set the css properties border and border-collapse on your table tag and set the right border for your td. table { border: 1px solid black; border-collapse: collapse; width: 100%; } td { border-right: 1px solid black; text-align: center; padding: 5px; } <table> <tr> <td> a </td> <td>...
How to element content into new element
You can use Jquery for this: $("#moveFrom").appendTo("#moveHere"); Refer appendTo JSFIDDLE DEMO...
How to use modulo operator for table row and col structure?
javascript,angularjs,html-table,modulo
Better solution is to have a if-condition for the repeat ng-if="$index%5" Update: Added - for filling rest of the columns if its less than 5 <span>{{basicInfoCustomFields[$parent.$index+i].name || "-"}}</span> Plunkr Demo var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.basicInfoCustomFields = [ {"name":"Anto"}, {"name":"Julie"}, {"name":"John"}, {"name":"Doe"}, {"name":"Ray"}, {"name":"Sassy"}, {"name":"Wright"}, {"name":"Fred"}, {"name":"Flintstone"},...
CSS Fixed column width with scroll bar
Two things: You have a missing ">" at the end of your closing </td>. You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td> The solution you are looking for is word-wrap: break-word; This will allow the content to...
Using Javascript prompts to dynamically create table (not working)
You have some errors in your code, for example: <table style = "width:100%" cellspacing="5" border="2"> You can not put html code like table inside head, you need to write this on body. var input[i]; //variable that holds the input values You can not define variables containing a key. The correct...
overlapping css of a table property with another
Classes are selected with a leading period in CSS: .clientOffer1 { ... } DEMO td { padding: 1px; line-height: 10px; text-align: center; /*background-color:#3C78B5;*/ vertical-align: auto; border: 1px solid #0088cc; width: 120px; } .clientOffer1 { border-left: 3px solid #0088cc; } If you are still having troubles, it would be because some...
Creating HTML table using PHP while loops to display data and allow user to submit to specific row
php,html,mysql,while-loop,html-table
$sub = intval($_POST['sub']); $selected = intval($_POST['selected']); if ($sub == 1){ mysql_query("INSERT INTO adoptionrequest(`userID`, `animalID`, `approved`) VALUES ('1','$selected','Awaiting Approval')"); if(mysql_errorno() > 0){echo mysql_error();} } echo '<form action="#" method="post" ><input type="hidden" name="sub" value="1"><table>'; $results = mysql_query("SELECT `animalID`, `name`,`type`,`dateofbirth`,`description`,`photo`,`available`,`owner` FROM `animal` WHERE `available` = 'Yes'");...
Table cell uses alot more width then it needs
html,css,table,html-table,newsletter
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right. Try putting border="1" onto your table definition to see what I mean. I'd suggest you use...
css,html5,twitter-bootstrap,razor,html-table
I found a work around for my issue. I just looped through the days and inserted blank td at the last day of the loop. Hence the space required by td is assigned at the end and sync remains as its needed.
create dynamically table from mysql result with rowspan
As you want to change the rowspan, you have to do 2 things : Check the next values in that column to know how many are the same Check the previous rowspan value to avoid printing a value that should not (because the previous one had a rowspan > 1)...
HTML spacing if value is empty
Your problem is that you got your semantics messed up. You try to build a table but then you put the whole table content in 1 cell and then you try to emulate the table in there by using a list. Just put 1 field in 1 table cell and...
Print table for loop error
java,jsp,for-loop,printing,html-table
put these line: out.print("<Table width=110% align=center border='1'>"); before the loop. and this line after the loop: out.print("</table>"); furthermore: add the tr tag inside the loop. so you get: out.print("<Table width=110% align=center border='1'>"); for (int i = 0; i < cards.size(); i++) { Card card = new Card(); card = cards.get(i);...
how get grand parent text in a table with jquery
javascript,jquery,table,html-table,parent
Use Jquery to bind the click event, then your $(this) will work. <table class="table table-striped"> <thead> <tr> <td>Name</td> <td>Delete</td> </tr> </thead> <tbody id="tabSelectUser"> <tr> <td> fabien </td> <td><a href="#" class="deleteBtn"> delete</a></td> </tr> </tbody> </table> Javascript: $(function() { $('.deleteBtn').click(aButtonPressed); }); function aButtonPressed(){ var prevCell =...
How to arrange table td using rowspan
html,css,twitter-bootstrap,html-table
I use this to generate the table: <table border="1" width="500"> <tr> <td rowspan="3">1</td> <td colspan="2">2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td rowspan="4">7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> </tr> <tr> <td>12</td> <td>13</td>...
Aligning images in HTML tables
html,css,image,alignment,html-table
As mentioned in the following SO {Resize image proportionally with CSS?} You shouldn't try and constrain both dimensions and just set your width to 30% and your height to 'auto'. Give that a shot....
Is it possible to cross out cells in an HTML table?
Well, this is a bit hacky, but it works. Utilize linear-gradient Using background-image for the current cell, strike through under content table { min-width: 100%; } table td { border: 1px solid silver; position: relative; } table td.crossed { background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), red, transparent calc(50%...
Truncate cell contents when needed, otherwise keep the table as narrow as possible
OK, I found a solution. I hope to contribute code later. Strategy: Use a hidden table to glean the desired cell widths of the visible table. Tactic: In addition to the table that the user shall see, a hidden "shadow" table, with identical content, must be created directly above the...
Override table-specific attributes with CSS?
Try this: table{ border:0; border-collapse: collapse; border-spacing: 0; padding:0; } ...
Apply class to
You can search the table for p tags, then find the closest parent td and assign the class name. Using plain Javascript: // convert "Hello_blue" to "blue" function convertClassName(src) { return src.replace(/^.*?_/, ""); } var pTags = document.querySelectorAll("table p"); for (var i = 0; i < pTags.length; i++) { pTags[i].parentNode.className...
Extract a Cell/Td/tabledata value from a given row of a table using javascript/jquery
javascript,jquery,html,asp.net-mvc,html-table
You already have it since you are generating the HTML from server side, when the user clicks pass the id to the funcion to do whatever you want with it. <td> <a onclick="getId('@i.Id')">Edit</a> </td> function getId(id) {...} or if you prefer you can use something like this: <a onclick="getId(this)">Edit</a> function...
Make last td as row
If you want the last column of each row to appear, and you're willing to include explicit styles on all of the other columns, you can float them: td, th { display: block; float: left; /* for visibility only */ border: 1px solid grey; /* so we don't run out...
Bootstrap table with a sidebar
twitter-bootstrap,responsive-design,html-table
It looks like you've got some of the column classes on the wrong elements as @TomCat pointed out - maybe this will help: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Scrolling URL Hash</title> <meta name="description" content="Webpage for xxxx"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> </style>...
Focus on table cell/column
javascript,jquery,html,css,html-table
After the page is loaded and your data is genreated just redirect your page to the respective id. Say for example if it is thursday, get it from your data and just do the following: window.location = '#thursday'; this will focus thursday as you wanted. I have done a bin...
Can't print 9x9 table correctly
The best is what @Rizier says, but if you want to modify only your code then:- <table border=1> <tr> <?php for ($i = 1; $i < 82; $i++) { $arr[] = $i; } $j=1; //add a new count starts from 1 for ($i=0; $i<81; $i++) { echo '<td>'.$arr[$i].'</td>'; if ($j%9==0)...
How to make multiple left columns fixed and scroll the the rest columns in HTML table?
html,css,html5,css3,html-table
There is one jQuery Plugin "DataTable". This will help you to freeze any number of columns in your table. Check the tutorials here. http://www.datatables.net/extensions/fixedcolumns/ http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html Hope this solves your problem....
Problems putting a border on a HTML table
Try .withBorder { border: 1px solid black; } You should have defined type and color after size of the border....
Bootstrap table arrangement
Try like this: Demo HTML: <table class="table table-bordered"> <thead> <tr> <th rowspan="2">Heading</th> <th rowspan="2">Heading</th> <th colspan="4">Heading</th> </tr> <tr> <th>Heading</th> <th>Heading</th> <th>Heading</th> <th>SHeading</th> </tr> </thead> <tbody> <tr> <td>3546 </td> <td>89789</td> <td>3546</td> <td>789789</td>...
What CSS do I need to get this html to appear as it does in the original text?
You can change your <p> tags to <pre> tags, it preserves whitespace. Also, your line breaks should be <br/> not </br> body { background:black; } .marginalize { margin-left: 5em; margin-right: 5em; color: antiquewhite; } <pre class="marginalize"> BESSEMERS ULSTERS</pre> <pre class="marginalize"> KING ARTHUR. EMPEROR LUCIUS. KING LOT OF LOTHIAN. KING LOGRIS....
Force a line break after space in words in element
html,css,asp.net,gridview,html-table
You Can Use HTML <br> Tag to break like C2 <br> Sunday without Inverted Commas...
Unable to make the table body scroll
html,css,html5,css3,html-table
I managed to solve this trouble by using datatables. Here is a link for an example: http://datatables.net/examples/basic_init/scroll_y.html
Find specific value of input field inside a specified td
javascript,jquery,forms,html-table
Assuming there's only one <input> in the <td>, you should be able to find it using the selector you already have as the basis: var inpVal = thisObj.closest("tr").children('td:first').find('input').val() ...
Remove duplicate row from output table
You might be better of using group_concat: $query = mysql_query(" SELECT customer.customerId, customer.customerName, order.orderNo, group_concat(order.item SEPARATOR ',') as order_items FROM customer INNER JOIN orderInfo on orderInfo.customerId = customer.customerId GROUP BY customer.customerId "); And in your code, just replace the separator: while($order = mysql_fetch_assoc($query)) { echo '<tr> <td>'.$order['orderNo'].'</td> <td>'.$order['customerName'].'</td>...
HTML table with scrollbar inside bordered container
html5,css3,scrollbar,html-table
cross browser is a little problem, then you need javascript. but here is a start for you to play with using only css. webkit (works also in chrome) note: i added the height to force a scrollbar. <style> table{ width:300px; height:100px; direction:rtl; overflow:auto; display:inline-block; } ::-webkit-scrollbar { width: 20px; }...
Jquery split on row does not work if null
Have you tried changing selector to be this addBR($('.myClass:not(:empty)')); ...
Given a table whose headers have backgrounds, can you CSS-rotate only the text in the headers?
The closest I could come was to dispense with the borders and the border-spacing in the table. Giving the borders the style you need may be unattainable. The lines between the ths I simulated with an underline. .rotated-text { border-spacing: 0; } .rotated-text thead > tr { background-color: lightblue; }...
Displaying a nested array in an HTML table
php,html,arrays,nested,html-table
Judging from your array, this might be something like what you're looking for: <table border="1"> <thead> <tr> <th>Name</th> <th>Subject</th> <th>Test1 Marks</th> <th>Test2 Marks</th> <th>Total Marks</th> <th>Status</th> <th>Percentage</th> <th>Pass Count</th> <th>Total Percentage</th> </tr> </thead> <tbody> <?php foreach($arr as $name => $subjects): ?> <?php $i = 0; ?> <?php...
Making a table with “mysql_fetch_array();” not working properly
php,html,mysql,datatable,html-table
I add the lines that you need in yout code see the comments "// LINE ADDED". Try with this code: <?php include 'connection.php'; $queryroom = "SELECT * FROM rom"; $querystudent = "SELECT * FROM elev"; $queryspecial = "SELECT * FROM rom WHERE prosjektor = 1"; $resultroomm = mysql_query($queryRom); $resultstudent =...
Freeze table header while allowing dynamic widths
The approach to this is similar to your other question. Except in this case, the <tbody> is the viewport, and we'll need to give its rows display: table, so their widths can be manually set. I've added some JS to essentially clone the top rows with the most content and...
Is it wise or acceptable to create a table with a different number of columns (td) for each row (tr)
You do not have to include a colspan=, however, the size of the largest <td></td> will determine the width of the column as it is displayed. Different browsers (and releases) will render the table slightly differently (How the non-defined area is displayed).
Adding links to
If you want to put a link inside a <td> element, you just need to put a link inside a <td> element, like so: <td><a href="#">MY TEXT</a></td> ...
How to make a expand to fill space, without stretching parent if there is no space to fill?
jquery,html,css,height,html-table
What you need is basically to exclude the inner table from the document flow, that can be achieved using absolute positioning: table { border-collapse: collapse; } table, th, td { border: 1px solid black; } #test { overflow-y: scroll; position:absolute; top:0px; right:0; left:0; bottom:0; } <table style="width:100%"> <tr> <th colspan="4">This...
Identical CSS working on JSFiddle, broken in browser
css,responsive-design,html-table
Remove the media query tag @media only screen and (max-width: 800px) {}, it works fine after. UPDATE: Adding <!DOCTYPE html> fixed the problem. ...
Gather all email address from selected table cells
For getting all possible email targets ( some of the cells are empty or doesn't have a mailto address) You can collect the data with the filter & map functions. I made a quick demo and added the option to deselect a cell and a button to clear all: Demo:...
Html table with Row lines hidden
javascript,html,css,html-table
You need to set the css properties border and border-collapse on your table tag and set the right border for your td. table { border: 1px solid black; border-collapse: collapse; width: 100%; } td { border-right: 1px solid black; text-align: center; padding: 5px; } <table> <tr> <td> a </td> <td>...
How to element content into new element
You can use Jquery for this: $("#moveFrom").appendTo("#moveHere"); Refer appendTo JSFIDDLE DEMO...
How to use modulo operator for table row and col structure?
javascript,angularjs,html-table,modulo
Better solution is to have a if-condition for the repeat ng-if="$index%5" Update: Added - for filling rest of the columns if its less than 5 <span>{{basicInfoCustomFields[$parent.$index+i].name || "-"}}</span> Plunkr Demo var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.basicInfoCustomFields = [ {"name":"Anto"}, {"name":"Julie"}, {"name":"John"}, {"name":"Doe"}, {"name":"Ray"}, {"name":"Sassy"}, {"name":"Wright"}, {"name":"Fred"}, {"name":"Flintstone"},...
CSS Fixed column width with scroll bar
Two things: You have a missing ">" at the end of your closing </td>. You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td> The solution you are looking for is word-wrap: break-word; This will allow the content to...
Using Javascript prompts to dynamically create table (not working)
You have some errors in your code, for example: <table style = "width:100%" cellspacing="5" border="2"> You can not put html code like table inside head, you need to write this on body. var input[i]; //variable that holds the input values You can not define variables containing a key. The correct...
overlapping css of a table property with another
Classes are selected with a leading period in CSS: .clientOffer1 { ... } DEMO td { padding: 1px; line-height: 10px; text-align: center; /*background-color:#3C78B5;*/ vertical-align: auto; border: 1px solid #0088cc; width: 120px; } .clientOffer1 { border-left: 3px solid #0088cc; } If you are still having troubles, it would be because some...
Creating HTML table using PHP while loops to display data and allow user to submit to specific row
php,html,mysql,while-loop,html-table
$sub = intval($_POST['sub']); $selected = intval($_POST['selected']); if ($sub == 1){ mysql_query("INSERT INTO adoptionrequest(`userID`, `animalID`, `approved`) VALUES ('1','$selected','Awaiting Approval')"); if(mysql_errorno() > 0){echo mysql_error();} } echo '<form action="#" method="post" ><input type="hidden" name="sub" value="1"><table>'; $results = mysql_query("SELECT `animalID`, `name`,`type`,`dateofbirth`,`description`,`photo`,`available`,`owner` FROM `animal` WHERE `available` = 'Yes'");...
Table cell uses alot more width then it needs
html,css,table,html-table,newsletter
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right. Try putting border="1" onto your table definition to see what I mean. I'd suggest you use...
You can search the table for p tags, then find the closest parent td and assign the class name. Using plain Javascript: // convert "Hello_blue" to "blue" function convertClassName(src) { return src.replace(/^.*?_/, ""); } var pTags = document.querySelectorAll("table p"); for (var i = 0; i < pTags.length; i++) { pTags[i].parentNode.className...
Extract a Cell/Td/tabledata value from a given row of a table using javascript/jquery
javascript,jquery,html,asp.net-mvc,html-table
You already have it since you are generating the HTML from server side, when the user clicks pass the id to the funcion to do whatever you want with it. <td> <a onclick="getId('@i.Id')">Edit</a> </td> function getId(id) {...} or if you prefer you can use something like this: <a onclick="getId(this)">Edit</a> function...
Make last td as row
If you want the last column of each row to appear, and you're willing to include explicit styles on all of the other columns, you can float them: td, th { display: block; float: left; /* for visibility only */ border: 1px solid grey; /* so we don't run out...
Bootstrap table with a sidebar
twitter-bootstrap,responsive-design,html-table
It looks like you've got some of the column classes on the wrong elements as @TomCat pointed out - maybe this will help: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Scrolling URL Hash</title> <meta name="description" content="Webpage for xxxx"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> </style>...
Focus on table cell/column
javascript,jquery,html,css,html-table
After the page is loaded and your data is genreated just redirect your page to the respective id. Say for example if it is thursday, get it from your data and just do the following: window.location = '#thursday'; this will focus thursday as you wanted. I have done a bin...
Can't print 9x9 table correctly
The best is what @Rizier says, but if you want to modify only your code then:- <table border=1> <tr> <?php for ($i = 1; $i < 82; $i++) { $arr[] = $i; } $j=1; //add a new count starts from 1 for ($i=0; $i<81; $i++) { echo '<td>'.$arr[$i].'</td>'; if ($j%9==0)...
How to make multiple left columns fixed and scroll the the rest columns in HTML table?
html,css,html5,css3,html-table
There is one jQuery Plugin "DataTable". This will help you to freeze any number of columns in your table. Check the tutorials here. http://www.datatables.net/extensions/fixedcolumns/ http://www.datatables.net/release-datatables/extensions/FixedColumns/examples/two_columns.html Hope this solves your problem....
Problems putting a border on a HTML table
Try .withBorder { border: 1px solid black; } You should have defined type and color after size of the border....
Bootstrap table arrangement
Try like this: Demo HTML: <table class="table table-bordered"> <thead> <tr> <th rowspan="2">Heading</th> <th rowspan="2">Heading</th> <th colspan="4">Heading</th> </tr> <tr> <th>Heading</th> <th>Heading</th> <th>Heading</th> <th>SHeading</th> </tr> </thead> <tbody> <tr> <td>3546 </td> <td>89789</td> <td>3546</td> <td>789789</td>...
What CSS do I need to get this html to appear as it does in the original text?
You can change your <p> tags to <pre> tags, it preserves whitespace. Also, your line breaks should be <br/> not </br> body { background:black; } .marginalize { margin-left: 5em; margin-right: 5em; color: antiquewhite; } <pre class="marginalize"> BESSEMERS ULSTERS</pre> <pre class="marginalize"> KING ARTHUR. EMPEROR LUCIUS. KING LOT OF LOTHIAN. KING LOGRIS....
Force a line break after space in words in element
html,css,asp.net,gridview,html-table
You Can Use HTML <br> Tag to break like C2 <br> Sunday without Inverted Commas...
Unable to make the table body scroll
html,css,html5,css3,html-table
I managed to solve this trouble by using datatables. Here is a link for an example: http://datatables.net/examples/basic_init/scroll_y.html
Find specific value of input field inside a specified td
javascript,jquery,forms,html-table
Assuming there's only one <input> in the <td>, you should be able to find it using the selector you already have as the basis: var inpVal = thisObj.closest("tr").children('td:first').find('input').val() ...
Remove duplicate row from output table
You might be better of using group_concat: $query = mysql_query(" SELECT customer.customerId, customer.customerName, order.orderNo, group_concat(order.item SEPARATOR ',') as order_items FROM customer INNER JOIN orderInfo on orderInfo.customerId = customer.customerId GROUP BY customer.customerId "); And in your code, just replace the separator: while($order = mysql_fetch_assoc($query)) { echo '<tr> <td>'.$order['orderNo'].'</td> <td>'.$order['customerName'].'</td>...
HTML table with scrollbar inside bordered container
html5,css3,scrollbar,html-table
cross browser is a little problem, then you need javascript. but here is a start for you to play with using only css. webkit (works also in chrome) note: i added the height to force a scrollbar. <style> table{ width:300px; height:100px; direction:rtl; overflow:auto; display:inline-block; } ::-webkit-scrollbar { width: 20px; }...
Jquery split on row does not work if null
Have you tried changing selector to be this addBR($('.myClass:not(:empty)')); ...
Given a table whose headers have backgrounds, can you CSS-rotate only the text in the headers?
The closest I could come was to dispense with the borders and the border-spacing in the table. Giving the borders the style you need may be unattainable. The lines between the ths I simulated with an underline. .rotated-text { border-spacing: 0; } .rotated-text thead > tr { background-color: lightblue; }...
Displaying a nested array in an HTML table
php,html,arrays,nested,html-table
Judging from your array, this might be something like what you're looking for: <table border="1"> <thead> <tr> <th>Name</th> <th>Subject</th> <th>Test1 Marks</th> <th>Test2 Marks</th> <th>Total Marks</th> <th>Status</th> <th>Percentage</th> <th>Pass Count</th> <th>Total Percentage</th> </tr> </thead> <tbody> <?php foreach($arr as $name => $subjects): ?> <?php $i = 0; ?> <?php...
Making a table with “mysql_fetch_array();” not working properly
php,html,mysql,datatable,html-table
I add the lines that you need in yout code see the comments "// LINE ADDED". Try with this code: <?php include 'connection.php'; $queryroom = "SELECT * FROM rom"; $querystudent = "SELECT * FROM elev"; $queryspecial = "SELECT * FROM rom WHERE prosjektor = 1"; $resultroomm = mysql_query($queryRom); $resultstudent =...
Freeze table header while allowing dynamic widths
The approach to this is similar to your other question. Except in this case, the <tbody> is the viewport, and we'll need to give its rows display: table, so their widths can be manually set. I've added some JS to essentially clone the top rows with the most content and...
Is it wise or acceptable to create a table with a different number of columns (td) for each row (tr)
You do not have to include a colspan=, however, the size of the largest <td></td> will determine the width of the column as it is displayed. Different browsers (and releases) will render the table slightly differently (How the non-defined area is displayed).
Adding links to
If you want to put a link inside a <td> element, you just need to put a link inside a <td> element, like so: <td><a href="#">MY TEXT</a></td> ...
How to make a expand to fill space, without stretching parent if there is no space to fill?
jquery,html,css,height,html-table
What you need is basically to exclude the inner table from the document flow, that can be achieved using absolute positioning: table { border-collapse: collapse; } table, th, td { border: 1px solid black; } #test { overflow-y: scroll; position:absolute; top:0px; right:0; left:0; bottom:0; } <table style="width:100%"> <tr> <th colspan="4">This...
Identical CSS working on JSFiddle, broken in browser
css,responsive-design,html-table
Remove the media query tag @media only screen and (max-width: 800px) {}, it works fine after. UPDATE: Adding <!DOCTYPE html> fixed the problem. ...
Gather all email address from selected table cells
For getting all possible email targets ( some of the cells are empty or doesn't have a mailto address) You can collect the data with the filter & map functions. I made a quick demo and added the option to deselect a cell and a button to clear all: Demo:...
Html table with Row lines hidden
javascript,html,css,html-table
You need to set the css properties border and border-collapse on your table tag and set the right border for your td. table { border: 1px solid black; border-collapse: collapse; width: 100%; } td { border-right: 1px solid black; text-align: center; padding: 5px; } <table> <tr> <td> a </td> <td>...
How to element content into new element
You can use Jquery for this: $("#moveFrom").appendTo("#moveHere"); Refer appendTo JSFIDDLE DEMO...
How to use modulo operator for table row and col structure?
javascript,angularjs,html-table,modulo
Better solution is to have a if-condition for the repeat ng-if="$index%5" Update: Added - for filling rest of the columns if its less than 5 <span>{{basicInfoCustomFields[$parent.$index+i].name || "-"}}</span> Plunkr Demo var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.basicInfoCustomFields = [ {"name":"Anto"}, {"name":"Julie"}, {"name":"John"}, {"name":"Doe"}, {"name":"Ray"}, {"name":"Sassy"}, {"name":"Wright"}, {"name":"Fred"}, {"name":"Flintstone"},...
CSS Fixed column width with scroll bar
Two things: You have a missing ">" at the end of your closing </td>. You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td> The solution you are looking for is word-wrap: break-word; This will allow the content to...
Using Javascript prompts to dynamically create table (not working)
You have some errors in your code, for example: <table style = "width:100%" cellspacing="5" border="2"> You can not put html code like table inside head, you need to write this on body. var input[i]; //variable that holds the input values You can not define variables containing a key. The correct...
overlapping css of a table property with another
Classes are selected with a leading period in CSS: .clientOffer1 { ... } DEMO td { padding: 1px; line-height: 10px; text-align: center; /*background-color:#3C78B5;*/ vertical-align: auto; border: 1px solid #0088cc; width: 120px; } .clientOffer1 { border-left: 3px solid #0088cc; } If you are still having troubles, it would be because some...
Creating HTML table using PHP while loops to display data and allow user to submit to specific row
php,html,mysql,while-loop,html-table
$sub = intval($_POST['sub']); $selected = intval($_POST['selected']); if ($sub == 1){ mysql_query("INSERT INTO adoptionrequest(`userID`, `animalID`, `approved`) VALUES ('1','$selected','Awaiting Approval')"); if(mysql_errorno() > 0){echo mysql_error();} } echo '<form action="#" method="post" ><input type="hidden" name="sub" value="1"><table>'; $results = mysql_query("SELECT `animalID`, `name`,`type`,`dateofbirth`,`description`,`photo`,`available`,`owner` FROM `animal` WHERE `available` = 'Yes'");...
Table cell uses alot more width then it needs
html,css,table,html-table,newsletter
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right. Try putting border="1" onto your table definition to see what I mean. I'd suggest you use...
If you want to put a link inside a <td> element, you just need to put a link inside a <td> element, like so: <td><a href="#">MY TEXT</a></td> ...
How to make a expand to fill space, without stretching parent if there is no space to fill?
jquery,html,css,height,html-table
What you need is basically to exclude the inner table from the document flow, that can be achieved using absolute positioning: table { border-collapse: collapse; } table, th, td { border: 1px solid black; } #test { overflow-y: scroll; position:absolute; top:0px; right:0; left:0; bottom:0; } <table style="width:100%"> <tr> <th colspan="4">This...
jquery,html,css,height,html-table
What you need is basically to exclude the inner table from the document flow, that can be achieved using absolute positioning: table { border-collapse: collapse; } table, th, td { border: 1px solid black; } #test { overflow-y: scroll; position:absolute; top:0px; right:0; left:0; bottom:0; } <table style="width:100%"> <tr> <th colspan="4">This...
Identical CSS working on JSFiddle, broken in browser
css,responsive-design,html-table
Remove the media query tag @media only screen and (max-width: 800px) {}, it works fine after. UPDATE: Adding <!DOCTYPE html> fixed the problem. ...
Gather all email address from selected table cells
For getting all possible email targets ( some of the cells are empty or doesn't have a mailto address) You can collect the data with the filter & map functions. I made a quick demo and added the option to deselect a cell and a button to clear all: Demo:...
Html table with Row lines hidden
javascript,html,css,html-table
You need to set the css properties border and border-collapse on your table tag and set the right border for your td. table { border: 1px solid black; border-collapse: collapse; width: 100%; } td { border-right: 1px solid black; text-align: center; padding: 5px; } <table> <tr> <td> a </td> <td>...
How to element content into new element
You can use Jquery for this: $("#moveFrom").appendTo("#moveHere"); Refer appendTo JSFIDDLE DEMO...
How to use modulo operator for table row and col structure?
javascript,angularjs,html-table,modulo
Better solution is to have a if-condition for the repeat ng-if="$index%5" Update: Added - for filling rest of the columns if its less than 5 <span>{{basicInfoCustomFields[$parent.$index+i].name || "-"}}</span> Plunkr Demo var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.basicInfoCustomFields = [ {"name":"Anto"}, {"name":"Julie"}, {"name":"John"}, {"name":"Doe"}, {"name":"Ray"}, {"name":"Sassy"}, {"name":"Wright"}, {"name":"Fred"}, {"name":"Flintstone"},...
CSS Fixed column width with scroll bar
Two things: You have a missing ">" at the end of your closing </td>. You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td> The solution you are looking for is word-wrap: break-word; This will allow the content to...
Using Javascript prompts to dynamically create table (not working)
You have some errors in your code, for example: <table style = "width:100%" cellspacing="5" border="2"> You can not put html code like table inside head, you need to write this on body. var input[i]; //variable that holds the input values You can not define variables containing a key. The correct...
overlapping css of a table property with another
Classes are selected with a leading period in CSS: .clientOffer1 { ... } DEMO td { padding: 1px; line-height: 10px; text-align: center; /*background-color:#3C78B5;*/ vertical-align: auto; border: 1px solid #0088cc; width: 120px; } .clientOffer1 { border-left: 3px solid #0088cc; } If you are still having troubles, it would be because some...
Creating HTML table using PHP while loops to display data and allow user to submit to specific row
php,html,mysql,while-loop,html-table
$sub = intval($_POST['sub']); $selected = intval($_POST['selected']); if ($sub == 1){ mysql_query("INSERT INTO adoptionrequest(`userID`, `animalID`, `approved`) VALUES ('1','$selected','Awaiting Approval')"); if(mysql_errorno() > 0){echo mysql_error();} } echo '<form action="#" method="post" ><input type="hidden" name="sub" value="1"><table>'; $results = mysql_query("SELECT `animalID`, `name`,`type`,`dateofbirth`,`description`,`photo`,`available`,`owner` FROM `animal` WHERE `available` = 'Yes'");...
Table cell uses alot more width then it needs
html,css,table,html-table,newsletter
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right. Try putting border="1" onto your table definition to see what I mean. I'd suggest you use...